.apv3-breadcrumb{ padding:18px 0; background:#F8F5EF; border-bottom:1px solid #ECE4D3; } .apv3-breadcrumb ul{ display:flex; gap:14px; padding:0; margin:0; list-style:none; align-items:center; } .apv3-breadcrumb li{ font-size:15px; color:#666; } .apv3-breadcrumb li a{ color:#0B2545; text-decoration:none; font-weight:600; } .apv3-breadcrumb li:not(:last-child):after{ content:"/"; margin-left:14px; color:#C9A961; } /*PAGES*/ /* ========================================================= A2Z VALUERS — GOVERNMENT APPROVED PROPERTY VALUERS ABOUT PAGE UNIQUE NAMESPACE ROYAL NAVY + GOLD ========================================================= */ :root{ --a2zpv-navy:#092f62; --a2zpv-deep:#061f40; --a2zpv-navy-light:#123f73; --a2zpv-gold:#b88723; --a2zpv-gold-light:#d8b766; --a2zpv-gold-soft:#f3e8cf; --a2zpv-white:#ffffff; --a2zpv-ivory:#fcfbf8; --a2zpv-light:#f4f7fa; --a2zpv-text:#33475b; --a2zpv-muted:#718096; --a2zpv-border:rgba(9,47,98,.13); } /* ========================================================= GLOBAL SECTION BASE ========================================================= */ .a2zpvAboutHero *, .a2zpvPracticeSection *, .a2zpvContactSection *, .a2zpvFinalCTA *{ box-sizing:border-box; } .a2zpvAboutHero, .a2zpvPracticeSection, .a2zpvContactSection, .a2zpvFinalCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .a2zpvAboutHero p, .a2zpvPracticeSection p, .a2zpvContactSection p, .a2zpvFinalCTA p{ font-size:16px; line-height:1.8; } /* ========================================================= ABOUT HERO ========================================================= */ .a2zpvAboutHero{ position:relative; overflow:hidden; padding:90px 24px 95px; background: radial-gradient( circle at 88% 12%, rgba(216,183,102,.13), transparent 27% ), linear-gradient( 135deg, var(--a2zpv-deep), var(--a2zpv-navy) 65%, var(--a2zpv-navy-light) ); color:#ffffff; } .a2zpvAboutHero:before{ content:""; position:absolute; width:680px; height:680px; right:-410px; top:-360px; border:1px solid rgba(216,183,102,.13); border-radius:50%; } .a2zpvAboutHero:after{ content:""; position:absolute; width:360px; height:360px; left:-260px; bottom:-270px; border:1px solid rgba(255,255,255,.06); border-radius:50%; } .a2zpvAboutHeroGlow{ position:absolute; width:250px; height:250px; right:14%; bottom:-170px; border-radius:50%; background: rgba(216,183,102,.06); filter:blur(30px); } .a2zpvAboutHeroContainer{ position:relative; z-index:2; width:min(1200px,100%); margin:auto; } .a2zpvAboutHeroContent{ max-width:1050px; } .a2zpvAboutEyebrow{ display:flex; align-items:center; gap:13px; margin-bottom:22px; color:var(--a2zpv-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .a2zpvAboutEyebrow span{ width:48px; height:2px; background:var(--a2zpv-gold-light); flex:0 0 auto; } .a2zpvAboutHero h1{ margin:0 0 28px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(45px,6vw,72px); line-height:1.05; letter-spacing:-2px; font-weight:500; } .a2zpvAboutHero h1 strong{ display:block; color:var(--a2zpv-gold-light); font-weight:700; } .a2zpvAboutIntro{ max-width:950px; padding-left:23px; border-left:3px solid var(--a2zpv-gold); } .a2zpvAboutIntro p{ margin:0 0 17px; color:rgba(255,255,255,.77); } .a2zpvAboutIntro p:last-child{ margin-bottom:0; } .a2zpvAboutIntro strong{ color:#ffffff; font-weight:800; } /* ========================================================= CREDENTIALS ========================================================= */ .a2zpvAboutCredentials{ display:grid; grid-template-columns: repeat(4,1fr); margin-top:48px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .a2zpvCredential{ min-height:100px; display:flex; align-items:center; gap:15px; padding:17px 20px; border-right:1px solid rgba(255,255,255,.10); } .a2zpvCredential:last-child{ border-right:0; } .a2zpvCredentialMark{ min-width:55px; height:55px; display:flex; align-items:center; justify-content:center; padding:5px; border:1px solid rgba(216,183,102,.58); color:var(--a2zpv-gold-light); font-size:15px; line-height:1.2; font-weight:900; text-align:center; } .a2zpvCredential strong{ display:block; color:#ffffff; font-size:16px; line-height:1.4; } .a2zpvCredential small{ display:block; margin-top:4px; color:rgba(255,255,255,.57); font-size:15px; line-height:1.4; } /* ========================================================= PRACTICE SECTION ========================================================= */ .a2zpvPracticeSection{ padding:100px 24px; background:var(--a2zpv-ivory); color:var(--a2zpv-text); } .a2zpvPracticeContainer{ width:min(1200px,100%); margin:auto; } .a2zpvPracticeHeading{ max-width:800px; margin:0 auto 55px; text-align:center; } .a2zpvPracticeHeading > span{ display:block; margin-bottom:14px; color:var(--a2zpv-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .a2zpvPracticeHeading h2{ margin:0; color:var(--a2zpv-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(36px,4vw,52px); line-height:1.15; font-weight:500; } .a2zpvPracticeHeading h2 strong{ color:var(--a2zpv-navy); font-weight:700; } .a2zpvGoldRule{ width:70px; height:2px; margin:22px auto 0; background:var(--a2zpv-gold); } .a2zpvPracticeGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; } .a2zpvPracticeCard{ position:relative; min-height:285px; padding:31px 30px; border:1px solid var(--a2zpv-border); background:#ffffff; box-shadow: 0 15px 40px rgba(6,31,64,.055); overflow:hidden; transition:.3s ease; } .a2zpvPracticeCard:hover{ transform:translateY(-5px); box-shadow: 0 22px 50px rgba(6,31,64,.10); } .a2zpvPracticeCard:before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--a2zpv-navy); } .a2zpvPracticeCardGold{ background: linear-gradient( 145deg, #ffffff, #fbf7ee ); border-color:rgba(184,135,35,.25); } .a2zpvPracticeCardGold:before{ background:var(--a2zpv-gold); } .a2zpvPracticeNumber{ color:var(--a2zpv-gold); font-family: Georgia, "Times New Roman", serif; font-size:42px; line-height:1; } .a2zpvPracticeTag{ display:block; margin-top:18px; color:var(--a2zpv-navy); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.5px; } .a2zpvPracticeCard h3{ margin:10px 0 13px; color:var(--a2zpv-deep); font-family: Georgia, "Times New Roman", serif; font-size:27px; line-height:1.25; font-weight:600; } .a2zpvPracticeCard p{ margin:0; color:#5c6d7e; } .a2zpvPracticeCard p strong{ color:var(--a2zpv-navy); font-weight:800; } /* ========================================================= CONTACT / HEADQUARTERS ========================================================= */ .a2zpvContactSection{ padding:85px 24px; background:#ffffff; } .a2zpvContactContainer{ width:min(1200px,100%); margin:auto; display:grid; grid-template-columns: .85fr 1.15fr; gap:65px; align-items:center; } .a2zpvContactIntro > span{ display:block; margin-bottom:14px; color:var(--a2zpv-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .a2zpvContactIntro h2{ margin:0 0 20px; color:var(--a2zpv-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(35px,4vw,50px); line-height:1.15; font-weight:500; } .a2zpvContactIntro h2 strong{ display:block; color:var(--a2zpv-navy); font-weight:700; } .a2zpvContactIntro p{ margin:0; color:var(--a2zpv-muted); } .a2zpvContactIntro p strong{ color:var(--a2zpv-navy); font-weight:800; } .a2zpvContactDetails{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; } .a2zpvContactDetail{ display:flex; align-items:flex-start; gap:15px; min-height:145px; padding:22px; border:1px solid var(--a2zpv-border); background:var(--a2zpv-light); } .a2zpvContactIcon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border:1px solid rgba(184,135,35,.55); color:var(--a2zpv-gold); font-size:15px; font-weight:900; } .a2zpvContactDetail small{ display:block; margin-bottom:7px; color:var(--a2zpv-gold); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1.2px; } .a2zpvContactDetail strong{ display:block; color:var(--a2zpv-navy); font-size:15px; line-height:1.65; } .a2zpvContactDetail a{ display:block; color:var(--a2zpv-navy); font-size:17px; line-height:1.5; font-weight:800; text-decoration:none; } .a2zpvContactDetail a:hover{ color:var(--a2zpv-gold); } /* ========================================================= FINAL CTA ========================================================= */ .a2zpvFinalCTA{ padding:75px 24px; background: radial-gradient( circle at 90% 15%, rgba(216,183,102,.13), transparent 25% ), var(--a2zpv-deep); color:#ffffff; } .a2zpvFinalCTAContainer{ width:min(1200px,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:35px; border:1px solid rgba(216,183,102,.30); background:rgba(255,255,255,.035); } .a2zpvFinalCTAContent{ max-width:700px; } .a2zpvFinalCTAContent > span{ display:block; margin-bottom:9px; color:var(--a2zpv-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.7px; } .a2zpvFinalCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(30px,3.5vw,43px); line-height:1.18; font-weight:500; } .a2zpvFinalCTAContent h2 strong{ color:var(--a2zpv-gold-light); } .a2zpvFinalCTAContent p{ margin:13px 0 0; color:rgba(255,255,255,.63); } .a2zpvFinalCTAActions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .a2zpvExpertButton{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:14px 22px; border:1px solid var(--a2zpv-gold-light); background:var(--a2zpv-gold); color:#ffffff; text-decoration:none; font-size:15px; font-weight:900; box-shadow: 0 12px 30px rgba(0,0,0,.22); transition:.25s ease; } .a2zpvExpertButton b{ font-size:20px; } .a2zpvExpertButton:hover{ background:#c99d3d; color:#ffffff; transform:translateY(-2px); } .a2zpvCallButton{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 19px; border:1px solid rgba(216,183,102,.45); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; font-size:16px; transition:.25s ease; } .a2zpvCallButton:hover{ color:#ffffff; background:rgba(255,255,255,.10); border-color:var(--a2zpv-gold-light); } /* ========================================================= TABLET ========================================================= */ @media (max-width:950px){ .a2zpvAboutCredentials{ grid-template-columns: repeat(2,1fr); } .a2zpvCredential:nth-child(2){ border-right:0; } .a2zpvCredential{ border-bottom:1px solid rgba(255,255,255,.10); } .a2zpvPracticeGrid{ grid-template-columns:1fr; } .a2zpvContactContainer{ grid-template-columns:1fr; gap:45px; } .a2zpvFinalCTAContainer{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .a2zpvAboutHero{ padding:65px 17px 70px; } .a2zpvAboutEyebrow{ font-size:15px; letter-spacing:1.2px; } .a2zpvAboutHero h1{ font-size:40px; line-height:1.08; letter-spacing:-1px; } .a2zpvAboutIntro{ padding-left:17px; } .a2zpvAboutIntro p{ font-size:15px; line-height:1.8; } .a2zpvAboutCredentials{ grid-template-columns:1fr; } .a2zpvCredential{ min-height:86px; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .a2zpvCredential:last-child{ border-bottom:0; } /* PRACTICE */ .a2zpvPracticeSection{ padding:70px 17px; } .a2zpvPracticeHeading{ margin-bottom:40px; } .a2zpvPracticeHeading h2{ font-size:34px; } .a2zpvPracticeCard{ min-height:auto; padding:27px 23px; } /* CONTACT */ .a2zpvContactSection{ padding:65px 17px; } .a2zpvContactContainer{ gap:35px; } .a2zpvContactIntro h2{ font-size:34px; } .a2zpvContactDetails{ grid-template-columns:1fr; } .a2zpvContactDetail{ min-height:auto; } /* CTA */ .a2zpvFinalCTA{ padding:55px 17px; } .a2zpvFinalCTAContainer{ padding:27px 20px; } .a2zpvFinalCTAContent h2{ font-size:29px; } .a2zpvFinalCTAActions{ width:100%; flex-direction:column; align-items:stretch; } .a2zpvExpertButton, .a2zpvCallButton{ width:100%; justify-content:center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .a2zpvAboutHero h1{ font-size:36px; } .a2zpvPracticeHeading h2, .a2zpvContactIntro h2{ font-size:30px; } } /* ========================================================= PRINCIPAL VALUER — NITESH SHRIVASTAVA UNIQUE PAGE CSS ROYAL NAVY + GOLD ========================================================= */ :root{ --gapvp-navy:#092f62; --gapvp-deep:#061f40; --gapvp-blue:#123f73; --gapvp-gold:#bd8b25; --gapvp-gold-light:#dfbd6b; --gapvp-gold-soft:#f5ead0; --gapvp-white:#ffffff; --gapvp-ivory:#fcfaf5; --gapvp-light:#f4f6f9; --gapvp-text:#435468; --gapvp-muted:#718096; --gapvp-border:rgba(9,47,98,.13); } /* ========================================================= COMMON ========================================================= */ .gapvpHero *, .gapvpEngineerSection *, .gapvpGovernmentSection *, .gapvpRegistrationSection *{ box-sizing:border-box; } .gapvpHero, .gapvpEngineerSection, .gapvpGovernmentSection, .gapvpRegistrationSection{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvpHero p, .gapvpEngineerSection p, .gapvpGovernmentSection p, .gapvpRegistrationSection p{ font-size:16px; line-height:1.8; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .gapvpHero{ position:relative; overflow:hidden; padding:80px 24px 0; color:#ffffff; background: radial-gradient( circle at 90% 12%, rgba(223,189,107,.15), transparent 27% ), linear-gradient( 135deg, #061f40 0%, #092f62 58%, #123f73 100% ); } .gapvpHero:before{ content:""; position:absolute; width:600px; height:600px; right:-350px; bottom:-400px; border:1px solid rgba(223,189,107,.14); border-radius:50%; } .gapvpHeroGrid{ position:relative; z-index:2; width:min(1240px,100%); margin:auto; display:grid; grid-template-columns: minmax(0,1.2fr) minmax(350px,.8fr); gap:70px; align-items:center; } /* ========================================================= HERO CONTENT ========================================================= */ .gapvpHeroContent{ padding-bottom:65px; } .gapvpHeroEyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:23px; color:var(--gapvp-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvpHeroEyebrow span{ width:48px; height:2px; background:var(--gapvp-gold-light); } .gapvpHero h1{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(52px,6vw,82px); line-height:.98; letter-spacing:-2.8px; font-weight:500; } .gapvpHero h1 strong{ display:block; margin-top:12px; color:var(--gapvp-gold-light); font-weight:700; } .gapvpHero h1 span{ display:block; margin-top:17px; color:rgba(255,255,255,.84); font-family: "Inter", "Segoe UI", sans-serif; font-size:clamp(21px,2vw,29px); line-height:1.4; letter-spacing:-.2px; font-weight:700; } .gapvpHero h1 i{ margin:0 7px; color:var(--gapvp-gold-light); font-style:normal; } .gapvpHeroIntro{ max-width:820px; margin:30px 0 0; color:rgba(255,255,255,.72); font-size:18px !important; line-height:1.85 !important; } .gapvpHeroIntro strong{ color:#ffffff; font-weight:800; } /* ========================================================= CONTACT BAR ========================================================= */ .gapvpContactBar{ display:grid; grid-template-columns: 1.45fr .75fr .75fr; margin-top:38px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gapvpContactItem{ display:flex; gap:13px; min-height:88px; align-items:center; padding:15px 18px; border-right:1px solid rgba(255,255,255,.10); } .gapvpContactItem:last-child{ border-right:0; } .gapvpContactIcon{ width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:1px solid rgba(223,189,107,.52); color:var(--gapvp-gold-light); font-size:15px; font-weight:900; } .gapvpContactItem small{ display:block; margin-bottom:4px; color:rgba(255,255,255,.48); font-size:15px; line-height:1.3; font-weight:800; letter-spacing:.7px; } .gapvpContactItem strong{ display:block; color:#ffffff; font-size:15px; line-height:1.45; } .gapvpContactItem a{ display:block; color:#ffffff; font-size:17px; line-height:1.4; font-weight:800; text-decoration:none; } .gapvpContactItem a:hover{ color:var(--gapvp-gold-light); } /* ========================================================= HERO ACTIONS ========================================================= */ .gapvpHeroActions{ display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin-top:28px; } .gapvpPrimaryButton{ min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:14px 24px; background:var(--gapvp-gold); border:1px solid var(--gapvp-gold-light); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; box-shadow: 0 15px 35px rgba(0,0,0,.23); transition:.25s ease; } .gapvpPrimaryButton b{ font-size:22px; } .gapvpPrimaryButton:hover{ color:#ffffff; background:#d0a03b; transform:translateY(-2px); } .gapvpCallButton{ min-height:58px; display:flex; align-items:center; gap:12px; padding:8px 17px; border:1px solid rgba(223,189,107,.45); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvpCallButton:hover{ color:#ffffff; background:rgba(255,255,255,.09); border-color:var(--gapvp-gold-light); } .gapvpCallIcon{ width:39px; height:39px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvp-gold-light); color:var(--gapvp-gold-light); font-size:18px; } .gapvpCallButton small{ display:block; color:rgba(255,255,255,.52); font-size:15px; line-height:1.3; } .gapvpCallButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; } /* ========================================================= HERO CREDENTIAL PANEL ========================================================= */ .gapvpHeroCredentialPanel{ position:relative; min-height:535px; display:flex; flex-direction:column; border:1px solid rgba(223,189,107,.42); background: linear-gradient( 145deg, rgba(255,255,255,.09), rgba(255,255,255,.025) ); box-shadow: 0 35px 80px rgba(0,0,0,.24); } .gapvpCredentialPanelTop{ display:flex; align-items:center; justify-content:space-between; padding:20px 23px; border-bottom:1px solid rgba(255,255,255,.11); } .gapvpCredentialPanelTop span{ color:var(--gapvp-gold-light); font-size:15px; font-weight:900; letter-spacing:2px; } .gapvpCredentialPanelTop strong{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvp-gold-light); color:var(--gapvp-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:18px; } .gapvpCredentialPanelBody{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:42px; } .gapvpCredentialMonogram{ width:112px; height:112px; display:flex; align-items:center; justify-content:center; margin-bottom:30px; border:1px solid rgba(223,189,107,.62); outline:1px solid rgba(223,189,107,.16); outline-offset:7px; color:var(--gapvp-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:40px; } .gapvpCredentialPanelBody h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:41px; line-height:1.05; font-weight:500; } .gapvpCredentialPanelBody h2 strong{ display:block; color:var(--gapvp-gold-light); font-weight:700; } .gapvpCredentialPanelBody > p{ margin:13px 0 0; color:rgba(255,255,255,.73); font-size:16px; font-weight:700; } .gapvpCredentialPanelBody > p span{ margin:0 5px; color:var(--gapvp-gold-light); } .gapvpCredentialRule{ width:100%; height:1px; margin:30px 0; background: linear-gradient( 90deg, var(--gapvp-gold-light), rgba(255,255,255,.08), transparent ); } .gapvpCredentialRows{ display:grid; grid-template-columns: repeat(3,1fr); } .gapvpCredentialRows > div{ padding-right:14px; border-right:1px solid rgba(255,255,255,.10); } .gapvpCredentialRows > div:not(:first-child){ padding-left:14px; } .gapvpCredentialRows > div:last-child{ border-right:0; } .gapvpCredentialRows strong{ display:block; color:var(--gapvp-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:23px; } .gapvpCredentialRows span{ display:block; margin-top:4px; color:rgba(255,255,255,.52); font-size:15px; line-height:1.45; } .gapvpCredentialPanelBottom{ display:flex; justify-content:space-between; gap:15px; padding:16px 23px; border-top:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.48); font-size:15px; line-height:1.4; font-weight:800; letter-spacing:1px; } /* ========================================================= HERO BOTTOM STRIP ========================================================= */ .gapvpHeroBottom{ position:relative; z-index:3; width:min(1240px,100%); margin:auto; display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid rgba(255,255,255,.13); } .gapvpHeroBottom div{ padding:20px 18px; border-right:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.60); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.3px; } .gapvpHeroBottom div:last-child{ border-right:0; } /* ========================================================= SECTION 02 — CIVIL ENGINEER ========================================================= */ .gapvpEngineerSection{ padding:105px 24px; background:var(--gapvp-ivory); } .gapvpEngineerContainer{ width:min(1200px,100%); margin:auto; } .gapvpSectionHeading{ max-width:850px; margin-bottom:60px; } .gapvpEyebrow{ display:block; margin-bottom:14px; color:var(--gapvp-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvpSectionHeading h2{ margin:0; color:var(--gapvp-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4.5vw,58px); line-height:1.1; font-weight:500; } .gapvpSectionHeading h2 strong{ color:var(--gapvp-navy); font-weight:700; } .gapvpSectionHeading p{ max-width:730px; margin:20px 0 0; color:var(--gapvp-text); } /* ========================================================= ENGINEER LAYOUT ========================================================= */ .gapvpEngineerLayout{ display:grid; grid-template-columns: 280px minmax(0,1fr); gap:60px; padding:45px 0; border-top:1px solid var(--gapvp-border); border-bottom:1px solid var(--gapvp-border); } .gapvpEngineerIndex{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:340px; padding:30px; border-left:5px solid var(--gapvp-gold); background: linear-gradient( 145deg, #ffffff, #f5f0e5 ); } .gapvpEngineerIndex span{ color:var(--gapvp-gold); font-family: Georgia, "Times New Roman", serif; font-size:80px; line-height:.9; } .gapvpEngineerIndex strong{ margin-top:25px; color:var(--gapvp-navy); font-size:18px; line-height:1.3; letter-spacing:2px; } .gapvpEngineerIndex small{ margin-top:8px; color:var(--gapvp-muted); font-size:15px; line-height:1.4; font-weight:800; } .gapvpEngineerContent{ max-width:850px; } .gapvpEngineerContent p{ margin:0 0 20px; color:var(--gapvp-text); } .gapvpEngineerContent p strong{ color:var(--gapvp-navy); font-weight:850; } .gapvpEngineeringStatement{ margin-top:30px; padding:23px 25px; border-left:4px solid var(--gapvp-gold); background:#ffffff; box-shadow: 0 12px 30px rgba(6,31,64,.06); } .gapvpEngineeringStatement span{ display:block; margin-bottom:7px; color:var(--gapvp-gold); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1.5px; } .gapvpEngineeringStatement strong{ display:block; color:var(--gapvp-deep); font-family: Georgia, "Times New Roman", serif; font-size:21px; line-height:1.45; } /* ========================================================= ENGINEERING CARDS ========================================================= */ .gapvpEngineeringGrid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top:22px; } .gapvpEngineeringCard{ padding:25px 22px; border:1px solid var(--gapvp-border); background:#ffffff; } .gapvpEngineeringCard span{ display:block; color:var(--gapvp-gold); font-family: Georgia, "Times New Roman", serif; font-size:25px; } .gapvpEngineeringCard strong{ display:block; margin-top:17px; color:var(--gapvp-deep); font-size:17px; line-height:1.4; } .gapvpEngineeringCard p{ margin:9px 0 0; color:var(--gapvp-muted); font-size:15px !important; line-height:1.65 !important; } .gapvpEngineeringCard p strong{ display:inline; margin:0; color:var(--gapvp-navy); font-size:inherit; } /* ========================================================= SECTION 03 — GOVERNMENT EXPERIENCE ========================================================= */ .gapvpGovernmentSection{ padding:105px 24px; background:var(--gapvp-deep); color:#ffffff; } .gapvpGovernmentContainer{ width:min(1200px,100%); margin:auto; } .gapvpGovernmentHeader{ display:grid; grid-template-columns: 1.2fr .8fr; gap:60px; align-items:end; margin-bottom:55px; } .gapvpDarkEyebrow{ display:block; margin-bottom:14px; color:var(--gapvp-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvpGovernmentHeader h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4.5vw,58px); line-height:1.1; font-weight:500; } .gapvpGovernmentHeader h2 strong{ color:var(--gapvp-gold-light); } .gapvpGovernmentIntro{ padding-left:25px; border-left:2px solid var(--gapvp-gold); } .gapvpGovernmentIntro > span{ color:var(--gapvp-gold-light); font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvpGovernmentIntro p{ margin:9px 0 0; color:rgba(255,255,255,.62); } /* ========================================================= GOVERNMENT CARDS ========================================================= */ .gapvpGovernmentGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; } .gapvpGovernmentCard{ position:relative; min-height:390px; padding:34px; border:1px solid rgba(255,255,255,.13); background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ); } .gapvpGovernmentCardGold{ border-color:rgba(223,189,107,.38); background: linear-gradient( 145deg, rgba(189,139,37,.13), rgba(255,255,255,.025) ); } .gapvpGovernmentNumber{ color:var(--gapvp-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:65px; line-height:1; } .gapvpGovernmentTag{ display:inline-block; margin-top:28px; padding:7px 10px; border:1px solid rgba(223,189,107,.30); color:var(--gapvp-gold-light); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1px; } .gapvpGovernmentCard h3{ max-width:580px; margin:22px 0 17px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:34px; line-height:1.2; font-weight:500; } .gapvpGovernmentCard h3 strong{ color:var(--gapvp-gold-light); } .gapvpGovernmentCard p{ max-width:580px; margin:0; color:rgba(255,255,255,.65); } .gapvpGovernmentCard p strong{ color:#ffffff; } .gapvpGovernmentFooter{ position:absolute; left:34px; right:34px; bottom:25px; display:flex; justify-content:space-between; gap:15px; padding-top:16px; border-top:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.45); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1px; } .gapvpGovernmentStatement{ display:flex; align-items:center; gap:22px; margin-top:22px; padding:24px 27px; border:1px solid rgba(223,189,107,.27); background:rgba(255,255,255,.035); } .gapvpGovernmentSeal{ width:65px; height:65px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvp-gold-light); border-radius:50%; color:var(--gapvp-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:17px; font-weight:700; } .gapvpGovernmentStatement span{ display:block; margin-bottom:5px; color:var(--gapvp-gold-light); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1.3px; } .gapvpGovernmentStatement strong{ display:block; color:#ffffff; font-size:17px; line-height:1.55; } .gapvpISOStatement{ display:flex; align-items:center; gap:17px; margin-top:18px; padding:18px 22px; border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10); } .gapvpISOStatement > span{ color:var(--gapvp-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:25px; font-weight:700; } .gapvpISOStatement p{ margin:0; color:rgba(255,255,255,.58); font-size:15px !important; } .gapvpISOStatement p strong{ color:#ffffff; } /* ========================================================= SECTION 04 — REGISTRATIONS ========================================================= */ .gapvpRegistrationSection{ padding:105px 24px; background:var(--gapvp-light); } .gapvpRegistrationContainer{ width:min(1200px,100%); margin:auto; } .gapvpRegistrationHeading{ max-width:850px; margin-bottom:55px; } .gapvpRegistrationHeading h2{ margin:0; color:var(--gapvp-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4.5vw,58px); line-height:1.1; font-weight:500; } .gapvpRegistrationHeading h2 strong{ color:var(--gapvp-navy); } .gapvpRegistrationHeading p{ max-width:720px; margin:20px 0 0; color:var(--gapvp-text); } /* ========================================================= REGISTRATION GRID ========================================================= */ .gapvpRegistrationGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:17px; } .gapvpRegistrationCard{ min-height:330px; display:flex; flex-direction:column; padding:28px 25px; border:1px solid var(--gapvp-border); background:#ffffff; transition:.3s ease; } .gapvpRegistrationCard:hover{ transform:translateY(-5px); border-color:rgba(189,139,37,.40); box-shadow: 0 20px 45px rgba(6,31,64,.09); } .gapvpRegistrationCardFeatured{ border-top:4px solid var(--gapvp-gold); background: linear-gradient( 145deg, #ffffff, #fbf5e8 ); } .gapvpRegistrationTop{ display:flex; align-items:center; justify-content:space-between; } .gapvpRegistrationNumber{ color:var(--gapvp-gold); font-family: Georgia, "Times New Roman", serif; font-size:38px; line-height:1; } .gapvpRegistrationCode{ padding:7px 9px; border:1px solid rgba(9,47,98,.13); color:var(--gapvp-navy); font-size:15px; line-height:1.3; font-weight:900; } .gapvpRegistrationCard h3{ margin:25px 0 15px; color:var(--gapvp-deep); font-family: Georgia, "Times New Roman", serif; font-size:28px; line-height:1.2; font-weight:600; } .gapvpRegistrationCard p{ margin:0; color:var(--gapvp-text); font-size:15px !important; line-height:1.75 !important; } .gapvpRegistrationCard p strong{ color:var(--gapvp-navy); font-weight:850; } .gapvpRegistrationLine{ width:45px; height:2px; margin-top:auto; margin-bottom:15px; background:var(--gapvp-gold); } .gapvpRegistrationScope{ color:var(--gapvp-muted); font-size:15px; line-height:1.5; font-weight:800; letter-spacing:.4px; } /* ========================================================= FINAL CTA ========================================================= */ .gapvpRegistrationCTA{ display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:35px; padding:35px 32px; border:1px solid rgba(189,139,37,.40); background: linear-gradient( 120deg, var(--gapvp-deep), var(--gapvp-navy) ); } .gapvpRegistrationCTA > div:first-child{ max-width:700px; } .gapvpRegistrationCTA > div:first-child > span{ display:block; margin-bottom:7px; color:var(--gapvp-gold-light); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1.5px; } .gapvpRegistrationCTA h3{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.25; font-weight:500; } .gapvpRegistrationCTA h3 strong{ color:var(--gapvp-gold-light); } .gapvpRegistrationCTA p{ margin:9px 0 0; color:rgba(255,255,255,.61); font-size:15px; } .gapvpRegistrationActions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gapvpCTAButton{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:13px 23px; background:var(--gapvp-gold); border:1px solid var(--gapvp-gold-light); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; transition:.25s ease; } .gapvpCTAButton b{ font-size:21px; } .gapvpCTAButton:hover{ color:#ffffff; background:#d0a03b; transform:translateY(-2px); } .gapvpCTAButtonSecondary{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; padding:13px 18px; border:1px solid rgba(223,189,107,.50); background:rgba(255,255,255,.04); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; transition:.25s ease; } .gapvpCTAButtonSecondary:hover{ color:#ffffff; border-color:var(--gapvp-gold-light); background:rgba(255,255,255,.10); } /* ========================================================= RESPONSIVE — 1100px ========================================================= */ @media (max-width:1100px){ .gapvpHeroGrid{ grid-template-columns: minmax(0,1fr) minmax(320px,.75fr); gap:40px; } .gapvpContactBar{ grid-template-columns:1fr; } .gapvpContactItem{ border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gapvpContactItem:last-child{ border-bottom:0; } .gapvpEngineeringGrid{ grid-template-columns: repeat(2,1fr); } .gapvpRegistrationGrid{ grid-template-columns: repeat(2,1fr); } } /* ========================================================= RESPONSIVE — 900px ========================================================= */ @media (max-width:900px){ .gapvpHeroGrid{ grid-template-columns:1fr; } .gapvpHeroContent{ padding-bottom:20px; } .gapvpHeroCredentialPanel{ min-height:460px; } .gapvpHeroBottom{ grid-template-columns: repeat(2,1fr); } .gapvpHeroBottom div:nth-child(2){ border-right:0; } .gapvpHeroBottom div{ border-bottom:1px solid rgba(255,255,255,.10); } .gapvpEngineerLayout{ grid-template-columns:1fr; gap:30px; } .gapvpEngineerIndex{ min-height:230px; } .gapvpGovernmentHeader{ grid-template-columns:1fr; gap:25px; } .gapvpGovernmentGrid{ grid-template-columns:1fr; } .gapvpRegistrationCTA{ align-items:flex-start; flex-direction:column; } } /* ========================================================= RESPONSIVE — 600px ========================================================= */ @media (max-width:600px){ .gapvpHero{ padding:60px 17px 0; } .gapvpHero h1{ font-size:44px; letter-spacing:-1.5px; } .gapvpHero h1 span{ font-size:20px; } .gapvpHeroIntro{ font-size:16px !important; } .gapvpContactItem{ padding:15px 5px; } .gapvpHeroActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvpPrimaryButton, .gapvpCallButton{ width:100%; justify-content:center; } .gapvpHeroCredentialPanel{ min-height:430px; } .gapvpCredentialPanelBody{ padding:30px 22px; } .gapvpCredentialMonogram{ width:90px; height:90px; font-size:32px; } .gapvpCredentialPanelBody h2{ font-size:35px; } .gapvpCredentialRows{ grid-template-columns:1fr; gap:15px; } .gapvpCredentialRows > div, .gapvpCredentialRows > div:not(:first-child){ padding:0 0 12px; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gapvpCredentialRows > div:last-child{ border-bottom:0; } .gapvpCredentialPanelBottom{ flex-direction:column; gap:5px; } .gapvpHeroBottom{ grid-template-columns:1fr; } .gapvpHeroBottom div{ border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gapvpHeroBottom div:last-child{ border-bottom:0; } /* ENGINEER */ .gapvpEngineerSection, .gapvpGovernmentSection, .gapvpRegistrationSection{ padding:72px 17px; } .gapvpSectionHeading h2, .gapvpGovernmentHeader h2, .gapvpRegistrationHeading h2{ font-size:36px; } .gapvpEngineerIndex{ padding:25px; } .gapvpEngineerIndex span{ font-size:65px; } .gapvpEngineeringGrid{ grid-template-columns:1fr; } /* GOVERNMENT */ .gapvpGovernmentCard{ min-height:390px; padding:27px 23px; } .gapvpGovernmentCard h3{ font-size:29px; } .gapvpGovernmentFooter{ left:23px; right:23px; } .gapvpGovernmentStatement{ align-items:flex-start; padding:20px; } /* REGISTRATIONS */ .gapvpRegistrationGrid{ grid-template-columns:1fr; } .gapvpRegistrationCard{ min-height:300px; } .gapvpRegistrationCTA{ padding:27px 20px; } .gapvpRegistrationCTA h3{ font-size:27px; } .gapvpRegistrationActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvpCTAButton, .gapvpCTAButtonSecondary{ width:100%; justify-content:center; } } /* ========================================================= RESPONSIVE — 390px ========================================================= */ @media (max-width:390px){ .gapvpHero h1{ font-size:39px; } .gapvpHero h1 span{ font-size:19px; } .gapvpSectionHeading h2, .gapvpGovernmentHeader h2, .gapvpRegistrationHeading h2{ font-size:32px; } .gapvpGovernmentCard h3{ font-size:27px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS PROPERTY VALUATION FUNDAMENTALS PAGE UNIQUE NAMESPACE: gapvDef / gapvCircle / gapvRegistrar ========================================================= */ :root{ --gapv-pv-navy:#092f62; --gapv-pv-deep:#061f40; --gapv-pv-blue:#123f73; --gapv-pv-gold:#b88723; --gapv-pv-gold-light:#d9b65f; --gapv-pv-gold-soft:#f3e6c5; --gapv-pv-white:#ffffff; --gapv-pv-cream:#fbfaf7; --gapv-pv-light:#f3f6f9; --gapv-pv-text:#34475b; --gapv-pv-muted:#6d7b8b; --gapv-pv-border:rgba(9,47,98,.13); } /* ========================================================= BASE ========================================================= */ .gapvDefHero *, .gapvCircleSection *, .gapvRegistrarSection *, .gapvAssessmentSection *, .gapvDefinitionCTA *{ box-sizing:border-box; } .gapvDefHero, .gapvCircleSection, .gapvRegistrarSection, .gapvAssessmentSection, .gapvDefinitionCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvDefHero p, .gapvCircleSection p, .gapvRegistrarSection p, .gapvAssessmentSection p, .gapvDefinitionCTA p{ font-size:16px; line-height:1.8; } /* ========================================================= SECTION 01 DEFINITION HERO ========================================================= */ .gapvDefHero{ position:relative; overflow:hidden; padding:105px 24px 80px; background: radial-gradient( circle at 88% 12%, rgba(216,183,102,.16), transparent 27% ), linear-gradient( 135deg, var(--gapv-pv-deep), var(--gapv-pv-navy) ); color:#ffffff; } .gapvDefHeroGlow{ position:absolute; width:650px; height:650px; right:-360px; bottom:-430px; border:1px solid rgba(216,183,102,.18); border-radius:50%; } .gapvDefContainer{ position:relative; z-index:2; width:min(1160px,100%); margin:auto; } .gapvDefEyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:25px; color:var(--gapv-pv-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvDefEyebrow span{ width:45px; height:2px; background:var(--gapv-pv-gold-light); } .gapvDefHero h1{ max-width:1000px; margin:0; font-family: Georgia, "Times New Roman", serif; font-size:clamp(48px,6vw,76px); line-height:1.03; letter-spacing:-2px; font-weight:500; color:#ffffff; } .gapvDefHero h1 strong{ display:block; margin-top:9px; color:var(--gapv-pv-gold-light); font-weight:700; } .gapvDefIntro{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:28px; max-width:1050px; margin-top:48px; padding-top:35px; border-top:1px solid rgba(255,255,255,.15); } .gapvDefIntroMark{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(216,183,102,.65); color:var(--gapv-pv-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:23px; font-weight:700; } .gapvDefIntro p{ margin:0 0 20px; color:rgba(255,255,255,.74); } .gapvDefIntro p strong{ color:#ffffff; font-weight:800; } .gapvDefIntro p:last-child{ margin-bottom:0; } .gapvDefDefinitionBar{ display:grid; grid-template-columns:1fr 70px 1fr; align-items:center; max-width:900px; margin-top:45px; border:1px solid rgba(216,183,102,.25); background:rgba(255,255,255,.045); } .gapvDefDefinitionBar > div{ min-height:90px; display:flex; flex-direction:column; justify-content:center; padding:18px 24px; } .gapvDefDefinitionBar small{ margin-bottom:5px; color:var(--gapv-pv-gold-light); font-size:15px; font-weight:900; letter-spacing:1.3px; } .gapvDefDefinitionBar strong{ color:#ffffff; font-size:18px; line-height:1.4; } .gapvDefDefinitionArrow{ align-items:center; justify-content:center !important; border-left:1px solid rgba(255,255,255,.10); border-right:1px solid rgba(255,255,255,.10); color:var(--gapv-pv-gold-light); font-size:25px; } /* ========================================================= SECTION 02 FMV VS CIRCLE RATE ========================================================= */ .gapvCircleSection{ padding:105px 24px; background:var(--gapv-pv-cream); } .gapvCircleContainer{ width:min(1160px,100%); margin:auto; } .gapvCircleHeader{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:25px; align-items:start; margin-bottom:45px; } .gapvCircleHeaderNumber{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapv-pv-gold); color:var(--gapv-pv-gold); font-family: Georgia, "Times New Roman", serif; font-size:28px; } .gapvLightEyebrow{ display:block; margin-bottom:9px; color:var(--gapv-pv-gold); font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvCircleHeader h2{ max-width:850px; margin:0; color:var(--gapv-pv-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4.5vw,58px); line-height:1.1; font-weight:500; } .gapvCircleHeader h2 strong{ color:var(--gapv-pv-navy); font-weight:700; } .gapvCircleGrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .gapvCircleCard{ position:relative; min-height:490px; display:flex; flex-direction:column; padding:38px 34px 32px; border:1px solid var(--gapv-pv-border); } .gapvCircleCardDark{ background:var(--gapv-pv-deep); color:#ffffff; } .gapvCircleCardGold{ background: linear-gradient( 145deg, #ffffff, #faf5e9 ); } .gapvCircleCardTop{ display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.13); } .gapvCircleCardGold .gapvCircleCardTop{ border-color:var(--gapv-pv-border); } .gapvCircleCardTop span{ font-size:15px; font-weight:900; letter-spacing:1.5px; } .gapvCircleCardDark .gapvCircleCardTop span{ color:rgba(255,255,255,.58); } .gapvCircleCardGold .gapvCircleCardTop span{ color:var(--gapv-pv-muted); } .gapvCircleCardTop strong{ color:var(--gapv-pv-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:28px; } .gapvCircleCard h3{ margin:30px 0 20px; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.2; } .gapvCircleCardDark h3{ color:#ffffff; } .gapvCircleCardGold h3{ color:var(--gapv-pv-deep); } .gapvCircleCard p{ margin:0 0 17px; } .gapvCircleCardDark p{ color:rgba(255,255,255,.68); } .gapvCircleCardGold p{ color:var(--gapv-pv-text); } .gapvCircleCard p strong{ font-weight:800; } .gapvCircleCardDark p strong{ color:#ffffff; } .gapvCircleCardGold p strong{ color:var(--gapv-pv-navy); } .gapvCircleMeta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); } .gapvCircleCardGold .gapvCircleMeta{ border-color:var(--gapv-pv-border); } .gapvCircleMeta span{ padding:7px 10px; font-size:15px; line-height:1.3; font-weight:700; } .gapvCircleCardDark .gapvCircleMeta span{ color:rgba(255,255,255,.62); background:rgba(255,255,255,.05); } .gapvCircleCardGold .gapvCircleMeta span{ color:var(--gapv-pv-navy); background:rgba(9,47,98,.045); } .gapvCircleInsight{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:22px; align-items:center; margin-top:25px; padding:25px 28px; border-left:4px solid var(--gapv-pv-gold); background:#ffffff; box-shadow:0 15px 40px rgba(6,31,64,.06); } .gapvCircleInsightIcon{ width:65px; height:65px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapv-pv-gold); color:var(--gapv-pv-gold); font-family: Georgia, "Times New Roman", serif; font-size:18px; font-weight:700; } .gapvCircleInsight strong{ display:block; margin-bottom:5px; color:var(--gapv-pv-navy); font-size:18px; line-height:1.45; } .gapvCircleInsight p{ margin:0; color:var(--gapv-pv-muted); } .gapvCircleInsight p strong{ display:inline; color:var(--gapv-pv-navy); font-size:inherit; } /* ========================================================= SECTION 03 SUB-REGISTRAR DATABASE ========================================================= */ .gapvRegistrarSection{ padding:105px 24px; background:#ffffff; } .gapvRegistrarContainer{ width:min(1160px,100%); margin:auto; } .gapvRegistrarHeading{ max-width:900px; margin-bottom:55px; } .gapvGoldEyebrow{ display:block; margin-bottom:12px; color:var(--gapv-pv-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvRegistrarHeading h2{ margin:0; color:var(--gapv-pv-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4.5vw,60px); line-height:1.1; font-weight:500; } .gapvRegistrarHeading h2 strong{ color:var(--gapv-pv-navy); font-weight:700; } .gapvRegistrarHeading p{ max-width:800px; margin:20px 0 0; color:var(--gapv-pv-muted); } .gapvRegistrarLayout{ display:grid; grid-template-columns: 1fr .95fr; gap:65px; align-items:start; } /* ========================================================= TIMELINE ========================================================= */ .gapvRegistrarTimeline{ position:relative; padding-left:8px; } .gapvRegistrarTimeline:before{ content:""; position:absolute; left:25px; top:30px; bottom:30px; width:1px; background: linear-gradient( to bottom, var(--gapv-pv-gold), rgba(184,135,35,.08) ); } .gapvRegistrarStep{ position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:22px; margin-bottom:38px; } .gapvRegistrarStep:last-child{ margin-bottom:0; } .gapvRegistrarStepNo{ position:relative; z-index:2; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapv-pv-gold); background:#ffffff; color:var(--gapv-pv-gold); font-size:15px; font-weight:900; } .gapvRegistrarStep strong{ display:block; margin:2px 0 7px; color:var(--gapv-pv-navy); font-family: Georgia, "Times New Roman", serif; font-size:21px; line-height:1.35; } .gapvRegistrarStep p{ margin:0; color:var(--gapv-pv-muted); } /* ========================================================= EVIDENCE PANEL ========================================================= */ .gapvEvidencePanel{ position:relative; padding:35px; background: linear-gradient( 145deg, var(--gapv-pv-deep), var(--gapv-pv-navy) ); color:#ffffff; box-shadow: 0 25px 60px rgba(6,31,64,.14); } .gapvEvidencePanel:after{ content:""; position:absolute; width:180px; height:180px; right:-70px; bottom:-75px; border:1px solid rgba(216,183,102,.2); border-radius:50%; } .gapvEvidencePanelTop{ display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.12); } .gapvEvidencePanelTop span{ color:rgba(255,255,255,.57); font-size:15px; font-weight:900; letter-spacing:1.5px; } .gapvEvidencePanelTop strong{ color:var(--gapv-pv-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:28px; } .gapvEvidencePanel h3{ position:relative; z-index:2; margin:30px 0 18px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:32px; line-height:1.2; font-weight:500; } .gapvEvidencePanel h3 span{ color:var(--gapv-pv-gold-light); } .gapvEvidencePanel p{ position:relative; z-index:2; margin:0; color:rgba(255,255,255,.67); } .gapvEvidencePanel p strong{ color:#ffffff; } .gapvEvidenceTags{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; } .gapvEvidenceTags span{ padding:8px 10px; border:1px solid rgba(216,183,102,.28); color:rgba(255,255,255,.74); font-size:15px; line-height:1.3; } .gapvEvidenceFormula{ position:relative; z-index:2; display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); } .gapvEvidenceFormula span{ color:rgba(255,255,255,.62); font-size:15px; font-weight:700; } .gapvEvidenceFormula b{ color:var(--gapv-pv-gold-light); font-size:19px; } .gapvEvidenceFormula strong{ padding:7px 10px; background:var(--gapv-pv-gold); color:#ffffff; font-size:15px; } /* ========================================================= SECTION 04 PROPERTY-SPECIFIC ASSESSMENT ========================================================= */ .gapvAssessmentSection{ padding:105px 24px; background:var(--gapv-pv-light); } .gapvAssessmentContainer{ width:min(1160px,100%); margin:auto; } .gapvAssessmentIntro{ display:grid; grid-template-columns: 1fr .7fr; gap:70px; align-items:end; margin-bottom:48px; } .gapvAssessmentIntro h2{ margin:0; color:var(--gapv-pv-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,54px); line-height:1.1; font-weight:500; } .gapvAssessmentIntro h2 strong{ color:var(--gapv-pv-navy); } .gapvAssessmentIntro > p{ margin:0; color:var(--gapv-pv-muted); } .gapvAssessmentGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:15px; } .gapvAssessmentCard{ min-height:250px; display:flex; flex-direction:column; padding:28px; border:1px solid var(--gapv-pv-border); background:#ffffff; transition:.25s ease; } .gapvAssessmentCard:hover{ transform:translateY(-4px); border-color:rgba(184,135,35,.42); box-shadow: 0 18px 40px rgba(6,31,64,.07); } .gapvAssessmentCard > span{ color:var(--gapv-pv-gold); font-family: Georgia, "Times New Roman", serif; font-size:28px; line-height:1; } .gapvAssessmentCard strong{ margin-top:28px; color:var(--gapv-pv-navy); font-family: Georgia, "Times New Roman", serif; font-size:22px; line-height:1.3; } .gapvAssessmentCard p{ margin:10px 0 0; color:var(--gapv-pv-muted); } /* ========================================================= SECTION 05 CTA ========================================================= */ .gapvDefinitionCTA{ padding:65px 24px; background: linear-gradient( 135deg, var(--gapv-pv-deep), var(--gapv-pv-navy) ); } .gapvDefinitionCTAContainer{ width:min(1160px,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:45px; padding:38px 40px; border:1px solid rgba(216,183,102,.35); background:rgba(255,255,255,.045); } .gapvDefinitionCTAContent{ max-width:700px; } .gapvDefinitionCTAContent > span{ display:block; margin-bottom:8px; color:var(--gapv-pv-gold-light); font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvDefinitionCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:36px; line-height:1.2; font-weight:500; } .gapvDefinitionCTAContent h2 strong{ color:var(--gapv-pv-gold-light); } .gapvDefinitionCTAContent p{ margin:12px 0 0; color:rgba(255,255,255,.62); } .gapvDefinitionCTAActions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gapvDefinitionButton{ min-height:57px; display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:14px 23px; border:1px solid var(--gapv-pv-gold-light); background:var(--gapv-pv-gold); color:#ffffff; text-decoration:none; font-size:16px; line-height:1.3; font-weight:900; box-shadow: 0 12px 28px rgba(0,0,0,.2); transition:.25s ease; } .gapvDefinitionButton b{ font-size:21px; } .gapvDefinitionButton:hover{ background:#ce9f38; color:#ffffff; transform:translateY(-2px); } .gapvDefinitionPhone{ min-height:57px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 18px; border:1px solid rgba(216,183,102,.45); color:#ffffff; text-decoration:none; background:rgba(255,255,255,.04); font-size:16px; font-weight:900; transition:.25s ease; } .gapvDefinitionPhone span{ color:var(--gapv-pv-gold-light); font-size:19px; } .gapvDefinitionPhone:hover{ color:#ffffff; border-color:var(--gapv-pv-gold-light); background:rgba(255,255,255,.08); } /* ========================================================= TABLET ========================================================= */ @media (max-width:900px){ .gapvRegistrarLayout{ grid-template-columns:1fr; gap:45px; } .gapvAssessmentIntro{ grid-template-columns:1fr; gap:20px; } .gapvAssessmentGrid{ grid-template-columns: repeat(2,1fr); } .gapvDefinitionCTAContainer{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvDefHero, .gapvCircleSection, .gapvRegistrarSection, .gapvAssessmentSection{ padding-left:17px; padding-right:17px; } .gapvDefHero{ padding-top:70px; padding-bottom:65px; } .gapvDefHero h1{ font-size:43px; letter-spacing:-1px; } .gapvDefIntro{ grid-template-columns:1fr; gap:20px; margin-top:35px; } .gapvDefIntroMark{ width:60px; height:60px; } .gapvDefIntro p{ font-size:15px; } .gapvDefDefinitionBar{ grid-template-columns:1fr; } .gapvDefDefinitionArrow{ min-height:45px !important; border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10); border-left:0 !important; border-right:0 !important; } /* CIRCLE RATE */ .gapvCircleSection{ padding-top:70px; padding-bottom:70px; } .gapvCircleHeader{ grid-template-columns:1fr; gap:18px; } .gapvCircleHeaderNumber{ width:58px; height:58px; } .gapvCircleHeader h2{ font-size:37px; } .gapvCircleGrid{ grid-template-columns:1fr; } .gapvCircleCard{ min-height:auto; padding:29px 23px; } .gapvCircleCard h3{ font-size:28px; } .gapvCircleInsight{ grid-template-columns:1fr; gap:15px; padding:23px 19px; } /* REGISTRAR */ .gapvRegistrarSection{ padding-top:70px; padding-bottom:70px; } .gapvRegistrarHeading h2{ font-size:37px; } .gapvRegistrarStep{ grid-template-columns:45px minmax(0,1fr); gap:16px; } .gapvRegistrarStepNo{ width:45px; height:45px; } .gapvRegistrarTimeline:before{ left:22px; } .gapvRegistrarStep strong{ font-size:19px; } .gapvEvidencePanel{ padding:27px 21px; } .gapvEvidencePanel h3{ font-size:28px; } /* ASSESSMENT */ .gapvAssessmentSection{ padding-top:70px; padding-bottom:70px; } .gapvAssessmentIntro h2{ font-size:36px; } .gapvAssessmentGrid{ grid-template-columns:1fr; } .gapvAssessmentCard{ min-height:auto; padding:25px 22px; } /* CTA */ .gapvDefinitionCTA{ padding:45px 17px; } .gapvDefinitionCTAContainer{ padding:27px 20px; } .gapvDefinitionCTAContent h2{ font-size:30px; } .gapvDefinitionCTAActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvDefinitionButton, .gapvDefinitionPhone{ width:100%; justify-content:center; } } /* ========================================================= EXTRA SMALL ========================================================= */ @media (max-width:390px){ .gapvDefHero h1{ font-size:39px; } .gapvCircleHeader h2, .gapvRegistrarHeading h2, .gapvAssessmentIntro h2{ font-size:32px; } .gapvDefinitionCTAContent h2{ font-size:27px; } } /* ========================================================= LANDMARK PROPERTY ENGAGEMENTS UNIQUE SECTION-WISE CSS ROYAL NAVY + GOLD ========================================================= */ .gapvLandmarkHero, .gapvLandmarkEngagement, .gapvLandmarkStatement, .gapvLandmarkCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvLandmarkHero *, .gapvLandmarkEngagement *, .gapvLandmarkStatement *, .gapvLandmarkCTA *{ box-sizing:border-box; } .gapvLandmarkHero p, .gapvLandmarkEngagement p, .gapvLandmarkStatement p, .gapvLandmarkCTA p{ font-size:16px; line-height:1.8; } /* ========================================================= HERO ========================================================= */ .gapvLandmarkHero{ position:relative; overflow:hidden; padding:105px 24px 85px; color:#ffffff; background: radial-gradient( circle at 85% 10%, rgba(216,183,102,.14), transparent 27% ), linear-gradient( 135deg, #061f40 0%, #092f62 62%, #123f73 100% ); } .gapvLandmarkHeroGlow{ position:absolute; width:650px; height:650px; right:-390px; top:-320px; border:1px solid rgba(216,183,102,.14); border-radius:50%; } .gapvLandmarkHeroContainer{ position:relative; z-index:2; width:min(1180px,100%); margin:auto; display:grid; grid-template-columns: minmax(0,1fr) 240px; gap:60px; align-items:center; } .gapvLandmarkHeroContent{ max-width:900px; } .gapvLandmarkEyebrow{ display:flex; align-items:center; gap:13px; margin-bottom:22px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvLandmarkEyebrow span{ width:50px; height:2px; background:#e0bd69; } .gapvLandmarkHero h1{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(45px,5.5vw,70px); line-height:1.03; letter-spacing:-2px; font-weight:500; } .gapvLandmarkHero h1 span{ display:block; margin-top:10px; color:#e0bd69; font-weight:700; } .gapvLandmarkHeroContent > p{ max-width:850px; margin:28px 0 0; color:rgba(255,255,255,.73); font-size:18px !important; line-height:1.8 !important; } .gapvLandmarkHeroContent > p strong{ color:#ffffff; font-weight:800; } .gapvLandmarkHeroMeta{ display:grid; grid-template-columns: repeat(3,1fr); max-width:800px; margin-top:38px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gapvLandmarkHeroMeta div{ padding:20px 18px; border-right:1px solid rgba(255,255,255,.10); } .gapvLandmarkHeroMeta div:last-child{ border-right:0; } .gapvLandmarkHeroMeta strong{ display:block; color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:23px; line-height:1.25; } .gapvLandmarkHeroMeta span{ display:block; margin-top:5px; color:rgba(255,255,255,.60); font-size:15px; line-height:1.5; } /* ========================================================= HERO BADGE ========================================================= */ .gapvLandmarkHeroBadge{ width:215px; height:215px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(216,183,102,.50); border-radius:50%; background: radial-gradient( circle, rgba(216,183,102,.12), rgba(255,255,255,.02) 62% ); transform:rotate(5deg); box-shadow: 0 25px 55px rgba(0,0,0,.20); } .gapvLandmarkBadgeInner{ width:175px; height:175px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(216,183,102,.28); border-radius:50%; text-align:center; transform:rotate(-5deg); } .gapvLandmarkBadgeInner span{ color:rgba(255,255,255,.62); font-size:15px; letter-spacing:2px; font-weight:800; } .gapvLandmarkBadgeInner strong{ margin:5px 0; color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:25px; line-height:1.1; } .gapvLandmarkBadgeInner small{ color:#ffffff; font-size:15px; letter-spacing:1.2px; font-weight:800; } /* ========================================================= ENGAGEMENT CONTAINER ========================================================= */ .gapvLandmarkContainer{ width:min(1180px,100%); margin:auto; } .gapvLandmarkEngagement{ padding:105px 24px; } .gapvLandmarkEngagementOne{ background:#fbfaf7; } .gapvLandmarkEngagementTwo{ background:#f3f6f9; } .gapvLandmarkEngagementGrid{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:45px; } /* ========================================================= SIDE MARKER ========================================================= */ .gapvLandmarkSide{ display:flex; flex-direction:column; align-items:flex-start; padding-top:5px; } .gapvLandmarkSideNumber{ color:#b88723; font-family: Georgia, "Times New Roman", serif; font-size:76px; line-height:.9; font-weight:500; } .gapvLandmarkSideLine{ width:45px; height:2px; margin:22px 0; background:#b88723; } .gapvLandmarkSideLabel{ max-width:120px; color:#092f62; font-size:15px; line-height:1.5; font-weight:900; letter-spacing:1.1px; } /* ========================================================= ENGAGEMENT CONTENT ========================================================= */ .gapvLandmarkEngagementContent{ max-width:900px; } .gapvLandmarkSectionTag{ display:inline-flex; align-items:center; min-height:34px; padding:7px 11px; border:1px solid rgba(9,47,98,.13); color:#092f62; background:rgba(9,47,98,.035); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1.1px; } .gapvLandmarkEngagementContent h2{ margin:20px 0 0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4.5vw,57px); line-height:1.08; letter-spacing:-1px; font-weight:500; } .gapvLandmarkEngagementContent h2 strong{ color:#092f62; font-weight:700; } .gapvLandmarkGoldLine{ width:75px; height:3px; margin:23px 0 28px; background:#b88723; } .gapvLandmarkEngagementContent p{ max-width:850px; margin:0 0 20px; color:#566779; } .gapvLandmarkEngagementContent p strong{ color:#092f62; font-weight:800; } .gapvLandmarkLead{ color:#334b64 !important; font-size:18px !important; line-height:1.82 !important; } /* ========================================================= METHODOLOGY PANEL ========================================================= */ .gapvLandmarkMethodology{ margin-top:38px; border:1px solid rgba(9,47,98,.13); background:#ffffff; box-shadow: 0 18px 45px rgba(6,31,64,.055); } .gapvLandmarkMethodologyHeader{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 23px; border-bottom:1px solid rgba(9,47,98,.10); background:#061f40; } .gapvLandmarkMethodologyHeader span{ color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.4px; } .gapvLandmarkMethodologyHeader strong{ color:#ffffff; font-size:16px; line-height:1.4; } .gapvLandmarkMethodologyGrid{ display:grid; grid-template-columns: repeat(3,1fr); } .gapvLandmarkMethod{ padding:25px 22px; border-right:1px solid rgba(9,47,98,.10); } .gapvLandmarkMethod:last-child{ border-right:0; } .gapvLandmarkMethod > span{ display:block; margin-bottom:13px; color:#b88723; font-family: Georgia, "Times New Roman", serif; font-size:22px; font-weight:600; } .gapvLandmarkMethod strong{ display:block; color:#092f62; font-size:17px; line-height:1.4; font-weight:900; } .gapvLandmarkMethod p{ margin:8px 0 0; color:#657589; font-size:15px; line-height:1.65; } /* ========================================================= ENGAGEMENT FOOTER ========================================================= */ .gapvLandmarkEngagementFooter{ display:flex; align-items:center; gap:15px; margin-top:32px; padding:17px 20px; border-left:3px solid #b88723; background:rgba(9,47,98,.035); } .gapvLandmarkEngagementFooter span{ color:#b88723; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1px; } .gapvLandmarkEngagementFooter strong{ color:#092f62; font-size:15px; line-height:1.5; } /* ========================================================= MID-PAGE STATEMENT ========================================================= */ .gapvLandmarkStatement{ position:relative; overflow:hidden; padding:70px 24px; background:#092f62; color:#ffffff; } .gapvLandmarkStatement:before{ content:""; position:absolute; width:400px; height:400px; right:-200px; top:-250px; border:1px solid rgba(216,183,102,.16); border-radius:50%; } .gapvLandmarkStatementInner{ position:relative; z-index:2; display:grid; grid-template-columns:105px minmax(0,1fr); gap:30px; align-items:center; max-width:1000px; margin:auto; } .gapvLandmarkStatementMark{ width:90px; height:90px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(216,183,102,.60); color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:27px; font-weight:700; } .gapvLandmarkStatementInner span{ display:block; margin-bottom:9px; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.7px; } .gapvLandmarkStatementInner h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:38px; line-height:1.18; font-weight:500; } .gapvLandmarkStatementInner h2 strong{ color:#e0bd69; } .gapvLandmarkStatementInner p{ max-width:800px; margin:14px 0 0; color:rgba(255,255,255,.68); } .gapvLandmarkStatementInner p strong{ color:#ffffff; } /* ========================================================= SPECIAL-PURPOSE PANEL ========================================================= */ .gapvLandmarkSpecialPanel{ margin-top:38px; border:1px solid rgba(9,47,98,.13); background:#ffffff; box-shadow: 0 18px 45px rgba(6,31,64,.055); } .gapvLandmarkSpecialHeader{ padding:21px 23px; background:#061f40; } .gapvLandmarkSpecialHeader span{ display:block; margin-bottom:5px; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.5px; } .gapvLandmarkSpecialHeader strong{ color:#ffffff; font-size:18px; line-height:1.4; } .gapvLandmarkSpecialRows{ display:grid; grid-template-columns: repeat(2,1fr); } .gapvLandmarkSpecialRows > div{ display:flex; flex-direction:column; gap:6px; padding:20px 22px; border-right:1px solid rgba(9,47,98,.10); border-bottom:1px solid rgba(9,47,98,.10); } .gapvLandmarkSpecialRows > div:nth-child(2n){ border-right:0; } .gapvLandmarkSpecialRows > div:nth-last-child(-n+2){ border-bottom:0; } .gapvLandmarkSpecialRows span{ color:#b88723; font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1px; } .gapvLandmarkSpecialRows strong{ color:#092f62; font-size:16px; line-height:1.5; } /* ========================================================= FINAL CTA ========================================================= */ .gapvLandmarkCTA{ padding:80px 24px; background:#fbfaf7; } .gapvLandmarkCTAContainer{ width:min(1050px,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:35px; padding:38px 40px; border:1px solid rgba(184,135,35,.35); background: linear-gradient( 120deg, #061f40, #092f62 ); box-shadow: 0 25px 60px rgba(6,31,64,.13); } .gapvLandmarkCTAContent{ max-width:680px; } .gapvLandmarkCTAContent > span{ display:block; margin-bottom:8px; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.6px; } .gapvLandmarkCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:34px; line-height:1.2; font-weight:500; } .gapvLandmarkCTAContent h2 strong{ color:#e0bd69; } .gapvLandmarkCTAContent p{ margin:12px 0 0; color:rgba(255,255,255,.65); } .gapvLandmarkCTAActions{ display:flex; flex-direction:column; gap:11px; min-width:215px; } .gapvLandmarkPrimaryButton{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 21px; border:1px solid #e0bd69; background:#b88723; color:#ffffff; text-decoration:none; font-size:15px; line-height:1.35; font-weight:900; text-align:center; transition:.25s ease; } .gapvLandmarkPrimaryButton b{ font-size:20px; } .gapvLandmarkPrimaryButton:hover{ background:#c99d3d; color:#ffffff; transform:translateY(-2px); } .gapvLandmarkPhoneButton{ min-height:54px; display:flex; align-items:center; justify-content:center; gap:9px; padding:13px 18px; border:1px solid rgba(224,189,105,.45); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; transition:.25s ease; } .gapvLandmarkPhoneButton:hover{ color:#ffffff; border-color:#e0bd69; background:rgba(255,255,255,.09); } /* ========================================================= TABLET ========================================================= */ @media (max-width:950px){ .gapvLandmarkHeroContainer{ grid-template-columns:1fr; } .gapvLandmarkHeroBadge{ width:170px; height:170px; margin-top:5px; } .gapvLandmarkBadgeInner{ width:138px; height:138px; } .gapvLandmarkBadgeInner strong{ font-size:21px; } .gapvLandmarkEngagementGrid{ grid-template-columns:90px minmax(0,1fr); gap:30px; } .gapvLandmarkMethodologyGrid{ grid-template-columns:1fr; } .gapvLandmarkMethod{ border-right:0; border-bottom:1px solid rgba(9,47,98,.10); } .gapvLandmarkMethod:last-child{ border-bottom:0; } .gapvLandmarkCTAContainer{ align-items:flex-start; flex-direction:column; } .gapvLandmarkCTAActions{ width:100%; flex-direction:row; flex-wrap:wrap; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvLandmarkHero{ padding:70px 17px 60px; } .gapvLandmarkHero h1{ font-size:41px; line-height:1.05; letter-spacing:-1px; } .gapvLandmarkHeroContent > p{ font-size:16px !important; } .gapvLandmarkHeroMeta{ grid-template-columns:1fr; } .gapvLandmarkHeroMeta div{ border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gapvLandmarkHeroMeta div:last-child{ border-bottom:0; } .gapvLandmarkEngagement{ padding:72px 17px; } .gapvLandmarkEngagementGrid{ grid-template-columns:1fr; gap:28px; } .gapvLandmarkSide{ display:grid; grid-template-columns:auto 45px minmax(0,1fr); align-items:center; gap:13px; } .gapvLandmarkSideNumber{ font-size:55px; } .gapvLandmarkSideLine{ width:45px; height:2px; margin:0; } .gapvLandmarkSideLabel{ max-width:none; } .gapvLandmarkEngagementContent h2{ font-size:36px; } .gapvLandmarkLead{ font-size:17px !important; } .gapvLandmarkMethodologyHeader{ align-items:flex-start; flex-direction:column; gap:8px; } .gapvLandmarkEngagementFooter{ align-items:flex-start; flex-direction:column; gap:6px; } /* MID STATEMENT */ .gapvLandmarkStatement{ padding:60px 17px; } .gapvLandmarkStatementInner{ grid-template-columns:1fr; gap:20px; } .gapvLandmarkStatementInner h2{ font-size:32px; } /* SPECIAL PANEL */ .gapvLandmarkSpecialRows{ grid-template-columns:1fr; } .gapvLandmarkSpecialRows > div, .gapvLandmarkSpecialRows > div:nth-child(2n){ border-right:0; } .gapvLandmarkSpecialRows > div:nth-last-child(-n+2){ border-bottom:1px solid rgba(9,47,98,.10); } .gapvLandmarkSpecialRows > div:last-child{ border-bottom:0; } /* CTA */ .gapvLandmarkCTA{ padding:60px 17px; } .gapvLandmarkCTAContainer{ padding:28px 20px; } .gapvLandmarkCTAContent h2{ font-size:29px; } .gapvLandmarkCTAActions{ flex-direction:column; align-items:stretch; } .gapvLandmarkPrimaryButton, .gapvLandmarkPhoneButton{ width:100%; } } /* ========================================================= PROPERTY TYPE MAP GOVERNMENT APPROVED PROPERTY VALUERS INDIA UNIQUE NAMESPACE: gapvProperty* ROYAL NAVY + GOLD ========================================================= */ .gapvPropertyMap{ position:relative; overflow:hidden; padding:110px 24px 100px; background: radial-gradient( circle at 8% 10%, rgba(197,150,47,.08), transparent 25% ), linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% ); color:#092f62; font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvPropertyMap *, .gapvPropertyMap *:before, .gapvPropertyMap *:after{ box-sizing:border-box; } /* ========================================================= CONTAINER ========================================================= */ .gapvPropertyMapContainer{ width:min(1240px,100%); margin:0 auto; } /* ========================================================= SECTION HEADER ========================================================= */ .gapvPropertyMapHeader{ max-width:930px; margin:0 auto 62px; text-align:center; } .gapvPropertyMapEyebrow{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; color:#b88723; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvPropertyMapEyebrow span{ width:42px; height:2px; background:#b88723; } .gapvPropertyMapHeader h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4.5vw,61px); line-height:1.1; letter-spacing:-1.4px; font-weight:500; } .gapvPropertyMapHeader h2 strong{ color:#092f62; font-weight:700; } .gapvPropertyMapHeader > p{ max-width:790px; margin:23px auto 0; color:#68788a; font-size:17px; line-height:1.8; } /* ========================================================= PROPERTY GRID ========================================================= */ .gapvPropertyGrid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:22px; } /* ========================================================= BASE CARD ========================================================= */ .gapvPropertyCard{ position:relative; display:flex; flex-direction:column; min-height:650px; padding:31px 31px 0; overflow:hidden; border:1px solid rgba(9,47,98,.12); background:#ffffff; box-shadow: 0 18px 45px rgba(6,31,64,.065); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .gapvPropertyCard:hover{ transform:translateY(-6px); border-color:rgba(184,135,35,.35); box-shadow: 0 28px 65px rgba(6,31,64,.12); } /* ========================================================= CARD GOLD TOP LINE ========================================================= */ .gapvPropertyCard:before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:#092f62; } .gapvCommercialCard:before, .gapvAgriculturalCard:before{ background:#b88723; } /* ========================================================= CARD TOP ========================================================= */ .gapvPropertyCardTop{ display:flex; align-items:center; justify-content:space-between; } .gapvPropertyNumber{ color:#b88723; font-family: Georgia, "Times New Roman", serif; font-size:48px; line-height:1; font-weight:500; } .gapvPropertyTag{ padding:7px 11px; border:1px solid rgba(9,47,98,.13); color:#092f62; font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1.3px; } .gapvCommercialCard .gapvPropertyTag, .gapvAgriculturalCard .gapvPropertyTag{ border-color:rgba(184,135,35,.32); color:#a4771c; } /* ========================================================= CATEGORY ICON ========================================================= */ .gapvPropertyIcon{ width:62px; height:62px; display:flex; align-items:center; justify-content:center; margin-top:26px; border:1px solid rgba(184,135,35,.45); background: linear-gradient( 145deg, #092f62, #061f40 ); color:#e0bd69; font-size:15px; line-height:1; font-weight:900; letter-spacing:1px; } .gapvCommercialCard .gapvPropertyIcon, .gapvAgriculturalCard .gapvPropertyIcon{ background: linear-gradient( 145deg, #b88723, #8f6717 ); color:#ffffff; } /* ========================================================= CARD HEADING ========================================================= */ .gapvPropertyCard h3{ margin:23px 0 13px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:34px; line-height:1.15; font-weight:500; } .gapvPropertyCard h3 strong{ color:#092f62; font-weight:700; } /* ========================================================= GOLD ACCENT ========================================================= */ .gapvPropertyAccent{ width:52px; height:3px; margin-bottom:19px; background:#b88723; } /* ========================================================= INTRO ========================================================= */ .gapvPropertyIntro{ margin:0 0 23px; padding-bottom:20px; border-bottom:1px solid rgba(9,47,98,.10); color:#536679; font-size:16px; line-height:1.7; } .gapvPropertyIntro strong{ color:#092f62; font-weight:800; } /* ========================================================= SUB-CATEGORIES ========================================================= */ .gapvPropertySubcategories{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:18px 22px; } .gapvPropertySubcategories > div{ position:relative; padding-left:17px; } .gapvPropertySubcategories > div:before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:#b88723; } .gapvPropertySubcategories > div > strong{ display:block; margin-bottom:5px; color:#092f62; font-size:16px; line-height:1.45; font-weight:900; } .gapvPropertySubcategories p{ margin:0; color:#6c7c8d; font-size:15px; line-height:1.65; } .gapvPropertySubcategories p strong{ color:#344d68; font-weight:800; } /* ========================================================= SPECIALIST LINK ========================================================= */ .gapvPropertySpecialist{ display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:58px; margin-top:auto; margin-left:-31px; margin-right:-31px; padding:15px 24px 15px 31px; border-top:1px solid rgba(9,47,98,.11); background:#f7f9fb; color:#092f62; text-decoration:none; font-size:15px; line-height:1.4; font-weight:900; transition:.25s ease; } .gapvPropertySpecialist b{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 auto; border:1px solid #b88723; color:#b88723; font-size:18px; transition:.25s ease; } .gapvPropertySpecialist:hover{ color:#ffffff; background:#092f62; } .gapvPropertySpecialist:hover b{ background:#b88723; color:#ffffff; } /* ========================================================= AGRICULTURAL / COMMERCIAL SPECIAL BACKGROUND ========================================================= */ .gapvCommercialCard, .gapvAgriculturalCard{ background: linear-gradient( 145deg, #ffffff 0%, #fffdf8 100% ); } /* ========================================================= CTA ========================================================= */ .gapvPropertyCTA{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:32px; padding:34px 35px; overflow:hidden; background: radial-gradient( circle at 90% 20%, rgba(224,189,105,.16), transparent 28% ), linear-gradient( 120deg, #061f40, #092f62 ); border:1px solid rgba(197,150,47,.38); box-shadow: 0 22px 55px rgba(6,31,64,.14); } .gapvPropertyCTA:after{ content:""; position:absolute; right:-110px; bottom:-150px; width:320px; height:320px; border:1px solid rgba(224,189,105,.16); border-radius:50%; } .gapvPropertyCTAContent{ position:relative; z-index:2; max-width:670px; } .gapvPropertyCTAContent > span{ display:block; margin-bottom:8px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .gapvPropertyCTAContent h3{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.25; font-weight:500; } .gapvPropertyCTAContent h3 strong{ color:#e0bd69; font-weight:700; } .gapvPropertyCTAContent p{ margin:9px 0 0; color:rgba(255,255,255,.66); font-size:15px; line-height:1.65; } .gapvPropertyCTAActions{ position:relative; z-index:3; display:flex; align-items:center; flex-wrap:wrap; gap:12px; } /* ========================================================= CTA BUTTON ========================================================= */ .gapvPropertyCTAButton{ min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:14px 22px; border:1px solid #e0bd69; background:#c5962f; color:#ffffff; text-decoration:none; font-size:16px; line-height:1.35; font-weight:900; box-shadow: 0 12px 28px rgba(0,0,0,.22); transition:.25s ease; } .gapvPropertyCTAButton b{ font-size:21px; } .gapvPropertyCTAButton:hover{ color:#ffffff; background:#d1a13d; transform:translateY(-2px); } /* ========================================================= PHONE BUTTON ========================================================= */ .gapvPropertyPhoneButton{ min-height:58px; display:flex; align-items:center; gap:11px; padding:8px 17px; border:1px solid rgba(224,189,105,.48); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvPropertyPhoneButton:hover{ color:#ffffff; background:rgba(255,255,255,.09); border-color:#e0bd69; } .gapvPropertyPhoneIcon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid #e0bd69; color:#e0bd69; font-size:18px; } .gapvPropertyPhoneButton small{ display:block; color:rgba(255,255,255,.55); font-size:15px; line-height:1.3; } .gapvPropertyPhoneButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1050px){ .gapvPropertyGrid{ gap:18px; } .gapvPropertyCard{ padding-left:25px; padding-right:25px; } .gapvPropertySpecialist{ margin-left:-25px; margin-right:-25px; padding-left:25px; } .gapvPropertySubcategories{ gap:16px; } .gapvPropertyCTA{ align-items:flex-start; flex-direction:column; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:800px){ .gapvPropertyMap{ padding:80px 20px; } .gapvPropertyGrid{ grid-template-columns:1fr; } .gapvPropertyCard{ min-height:auto; } .gapvPropertyMapHeader{ margin-bottom:45px; } .gapvPropertyMapHeader h2{ font-size:43px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvPropertyMap{ padding:65px 16px 70px; } .gapvPropertyMapHeader{ margin-bottom:35px; } .gapvPropertyMapEyebrow{ gap:9px; font-size:15px; letter-spacing:1.2px; } .gapvPropertyMapEyebrow span{ width:25px; } .gapvPropertyMapHeader h2{ font-size:35px; line-height:1.14; letter-spacing:-.7px; } .gapvPropertyMapHeader > p{ font-size:15px; line-height:1.75; } /* CARD */ .gapvPropertyCard{ padding:25px 20px 0; } .gapvPropertyNumber{ font-size:42px; } .gapvPropertyTag{ font-size:15px; padding:6px 8px; } .gapvPropertyIcon{ width:56px; height:56px; margin-top:21px; } .gapvPropertyCard h3{ font-size:30px; } .gapvPropertySubcategories{ grid-template-columns:1fr; gap:17px; } .gapvPropertySubcategories > div{ padding-left:16px; } .gapvPropertySubcategories p{ font-size:15px; line-height:1.65; } .gapvPropertySpecialist{ margin-left:-20px; margin-right:-20px; padding-left:20px; } /* CTA */ .gapvPropertyCTA{ margin-top:22px; padding:27px 20px; } .gapvPropertyCTAContent h3{ font-size:27px; } .gapvPropertyCTAActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvPropertyCTAButton, .gapvPropertyPhoneButton{ width:100%; justify-content:center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .gapvPropertyMapHeader h2{ font-size:31px; } .gapvPropertyCard h3{ font-size:28px; } .gapvPropertyNumber{ font-size:39px; } .gapvPropertyTag{ font-size:15px; } .gapvPropertyCTAContent h3{ font-size:25px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS INDIA FIVE METHODOLOGIES PAGE UNIQUE NAMESPACE: gapvm- ========================================================= */ :root{ --gapvm-navy:#092f62; --gapvm-deep:#061f40; --gapvm-blue:#123f73; --gapvm-gold:#b88723; --gapvm-gold-light:#dfbc69; --gapvm-gold-pale:#f5ead0; --gapvm-white:#ffffff; --gapvm-ivory:#fcfbf8; --gapvm-soft:#f3f6f9; --gapvm-text:#405267; --gapvm-muted:#728095; --gapvm-border:rgba(9,47,98,.13); } /* ========================================================= BASE ========================================================= */ .gapvmIntro *, .gapvmMethodMap *, .gapvmMethod *, .gapvmSummary *, .gapvmCTA *{ box-sizing:border-box; } .gapvmIntro, .gapvmMethodMap, .gapvmMethod, .gapvmSummary, .gapvmCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvmIntro p, .gapvmMethod p, .gapvmSummary, .gapvmCTA p{ font-size:16px; line-height:1.8; } /* ========================================================= COMMON CONTAINER ========================================================= */ .gapvmContainer{ width:min(1220px,100%); margin:0 auto; } /* ========================================================= INTRO / HERO ========================================================= */ .gapvmIntro{ position:relative; overflow:hidden; padding:105px 24px 95px; color:#ffffff; background: radial-gradient( circle at 88% 20%, rgba(223,188,105,.14), transparent 26% ), linear-gradient( 135deg, #061f40, #092f62 62%, #123f73 ); } .gapvmIntroPattern{ position:absolute; width:600px; height:600px; right:-330px; bottom:-390px; border:1px solid rgba(223,188,105,.15); border-radius:50%; } .gapvmIntroKicker{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:25px; color:var(--gapvm-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2.2px; } .gapvmIntroKicker span{ display:block; width:48px; height:2px; background:var(--gapvm-gold-light); } .gapvmIntro h1{ position:relative; max-width:1030px; margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(48px,6vw,78px); line-height:1.02; letter-spacing:-2.5px; font-weight:500; } .gapvmIntro h1 strong{ display:block; margin-top:8px; color:var(--gapvm-gold-light); font-weight:700; } .gapvmIntroText{ position:relative; max-width:850px; margin:30px 0 0; color:rgba(255,255,255,.74); font-size:19px !important; line-height:1.8 !important; } .gapvmIntroText strong{ color:#ffffff; font-weight:800; } .gapvmIntroTags{ position:relative; display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; } .gapvmIntroTags span{ padding:10px 15px; border:1px solid rgba(223,188,105,.30); background:rgba(255,255,255,.045); color:rgba(255,255,255,.78); font-size:15px; line-height:1.3; font-weight:700; } /* ========================================================= METHODOLOGY MAP ========================================================= */ .gapvmMethodMap{ padding:90px 24px; background:var(--gapvm-ivory); } .gapvmSectionHeading{ max-width:850px; margin:0 auto 48px; text-align:center; } .gapvmSectionHeading > span{ display:block; margin-bottom:13px; color:var(--gapvm-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvmSectionHeading h2{ margin:0; color:var(--gapvm-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(35px,4vw,51px); line-height:1.15; font-weight:500; } .gapvmSectionHeading h2 strong{ color:var(--gapvm-navy); } .gapvmSectionHeading p{ max-width:720px; margin:18px auto 0; color:var(--gapvm-muted); } .gapvmMapGrid{ display:grid; grid-template-columns: repeat(5,1fr); border-top:1px solid var(--gapvm-border); border-left:1px solid var(--gapvm-border); } .gapvmMapItem{ min-height:190px; display:flex; flex-direction:column; padding:25px 21px; border-right:1px solid var(--gapvm-border); border-bottom:1px solid var(--gapvm-border); background:#ffffff; text-decoration:none; transition:.25s ease; } .gapvmMapItem:hover{ background:var(--gapvm-navy); transform:translateY(-5px); box-shadow: 0 18px 35px rgba(6,31,64,.12); } .gapvmMapItem b{ color:var(--gapvm-gold); font-family: Georgia, "Times New Roman", serif; font-size:35px; line-height:1; } .gapvmMapItem strong{ margin-top:25px; color:var(--gapvm-deep); font-size:16px; line-height:1.45; } .gapvmMapItem span{ margin-top:auto; color:var(--gapvm-muted); font-size:15px; line-height:1.45; } .gapvmMapItem:hover strong, .gapvmMapItem:hover span{ color:#ffffff; } /* ========================================================= METHODOLOGY COMMON ========================================================= */ .gapvmMethod{ padding:105px 24px; } .gapvmMethodLight{ background:#ffffff; color:var(--gapvm-text); } .gapvmMethodDark{ position:relative; overflow:hidden; background: radial-gradient( circle at 90% 20%, rgba(223,188,105,.10), transparent 25% ), var(--gapvm-deep); color:#ffffff; } .gapvmMethodDark:after{ content:""; position:absolute; width:500px; height:500px; right:-330px; bottom:-350px; border:1px solid rgba(223,188,105,.12); border-radius:50%; } .gapvmMethodGrid{ position:relative; z-index:2; display:grid; grid-template-columns: .82fr 1.18fr; gap:80px; align-items:start; } .gapvmMethodIntro{ position:sticky; top:30px; } .gapvmMethodNumber{ color:var(--gapvm-gold); font-family: Georgia, "Times New Roman", serif; font-size:78px; line-height:.85; font-weight:700; } .gapvmMethodDark .gapvmMethodNumber{ color:var(--gapvm-gold-light); } .gapvmMethodType{ display:inline-block; margin-top:25px; padding:8px 11px; border:1px solid rgba(184,135,35,.35); color:var(--gapvm-gold); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1.1px; } .gapvmMethodDark .gapvmMethodType{ color:var(--gapvm-gold-light); border-color:rgba(223,188,105,.38); } .gapvmMethodIntro h2{ margin:20px 0 0; color:var(--gapvm-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(39px,4vw,57px); line-height:1.08; font-weight:500; } .gapvmMethodDark .gapvmMethodIntro h2{ color:#ffffff; } .gapvmMethodIntro h2 strong{ color:var(--gapvm-navy); font-weight:700; } .gapvmMethodDark .gapvmMethodIntro h2 strong{ color:var(--gapvm-gold-light); } .gapvmMethodRule{ width:75px; height:3px; margin:25px 0; background: linear-gradient( 90deg, var(--gapvm-gold), transparent ); } .gapvmMethodIntro p{ margin:0 0 17px; color:var(--gapvm-text); } .gapvmMethodDark .gapvmMethodIntro p{ color:rgba(255,255,255,.68); } .gapvmMethodIntro p strong{ color:var(--gapvm-navy); font-weight:800; } .gapvmMethodDark .gapvmMethodIntro p strong{ color:#ffffff; } .gapvmMethodContent{ min-width:0; } .gapvmMethodLabel{ margin-bottom:25px; color:var(--gapvm-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .gapvmMethodDark .gapvmMethodLabel{ color:var(--gapvm-gold-light); } /* ========================================================= CMA STEPS ========================================================= */ .gapvmStepList{ border-top:1px solid var(--gapvm-border); } .gapvmMethodDark .gapvmStepList{ border-color:rgba(255,255,255,.13); } .gapvmStep{ display:grid; grid-template-columns:55px minmax(0,1fr); gap:20px; padding:25px 0; border-bottom:1px solid var(--gapvm-border); } .gapvmMethodDark .gapvmStep{ border-color:rgba(255,255,255,.13); } .gapvmStep > span{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvm-gold); color:var(--gapvm-gold); font-size:15px; font-weight:900; } .gapvmStep h3{ margin:0 0 7px; color:var(--gapvm-deep); font-family: Georgia, "Times New Roman", serif; font-size:23px; line-height:1.3; } .gapvmMethodDark .gapvmStep h3{ color:#ffffff; } .gapvmStep p{ margin:0; color:var(--gapvm-text); } .gapvmMethodDark .gapvmStep p{ color:rgba(255,255,255,.63); } .gapvmStep p strong{ color:var(--gapvm-navy); font-weight:800; } .gapvmMethodDark .gapvmStep p strong{ color:var(--gapvm-gold-light); } .gapvmSourceBox{ display:flex; align-items:center; gap:20px; margin-top:28px; padding:18px 20px; border-left:3px solid var(--gapvm-gold); background:var(--gapvm-soft); } .gapvmSourceBox strong{ color:var(--gapvm-navy); font-size:15px; } .gapvmSourceBox span{ color:var(--gapvm-muted); font-size:15px; } /* ========================================================= INCOME FORMULAS ========================================================= */ .gapvmFormulaGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:15px; } .gapvmFormulaCard{ padding:27px; border:1px solid rgba(223,188,105,.20); background:rgba(255,255,255,.045); } .gapvmFormulaCard span{ display:block; margin-bottom:18px; color:var(--gapvm-gold-light); font-size:15px; font-weight:900; letter-spacing:1px; } .gapvmFormulaCard strong{ display:block; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:24px; line-height:1.35; } .gapvmFormulaCard strong em{ color:var(--gapvm-gold-light); font-style:normal; } .gapvmFormulaCard p{ margin:15px 0 0; color:rgba(255,255,255,.60); font-size:15px; } .gapvmInputGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; margin-top:22px; background:rgba(255,255,255,.10); } .gapvmInputGrid div{ display:flex; align-items:center; gap:14px; padding:16px; background:var(--gapvm-deep); } .gapvmInputGrid b{ color:var(--gapvm-gold-light); font-size:15px; } .gapvmInputGrid span{ color:rgba(255,255,255,.75); font-size:15px; } .gapvmRateNote{ margin-top:22px; padding:18px 20px; border:1px solid rgba(223,188,105,.30); background:rgba(223,188,105,.06); } .gapvmRateNote strong{ display:block; color:var(--gapvm-gold-light); font-size:15px; line-height:1.4; } .gapvmRateNote span{ display:block; margin-top:7px; color:rgba(255,255,255,.72); font-size:15px; line-height:1.5; } /* ========================================================= DRC FORMULA ========================================================= */ .gapvmDRCFormula{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; } .gapvmDRCFormula > div{ flex:1 1 125px; min-height:135px; display:flex; flex-direction:column; justify-content:center; padding:17px; border:1px solid var(--gapvm-border); background:#f8fafc; } .gapvmDRCFormula > div span{ color:var(--gapvm-gold); font-size:15px; font-weight:900; } .gapvmDRCFormula > div strong{ margin-top:8px; color:var(--gapvm-deep); font-family: Georgia, "Times New Roman", serif; font-size:20px; } .gapvmDRCFormula > div small{ margin-top:5px; color:var(--gapvm-muted); font-size:15px; line-height:1.4; } .gapvmDRCFormula > i{ display:flex; align-items:center; justify-content:center; color:var(--gapvm-gold); font-size:25px; font-style:normal; } .gapvmDRCFormula .gapvmDRCResult{ flex-basis:100%; min-height:105px; border-color:var(--gapvm-gold); background: linear-gradient( 120deg, var(--gapvm-navy), var(--gapvm-blue) ); } .gapvmDRCFormula .gapvmDRCResult span, .gapvmDRCFormula .gapvmDRCResult strong, .gapvmDRCFormula .gapvmDRCResult small{ color:#ffffff; } .gapvmDRCFormula .gapvmDRCResult strong{ color:var(--gapvm-gold-light); font-size:28px; } .gapvmDRCNotes{ display:grid; grid-template-columns: repeat(3,1fr); gap:15px; margin-top:22px; } .gapvmDRCNotes > div{ padding:20px; border-top:2px solid var(--gapvm-gold); background:var(--gapvm-soft); } .gapvmDRCNotes strong{ color:var(--gapvm-navy); font-size:15px; } .gapvmDRCNotes p{ margin:7px 0 0; color:var(--gapvm-muted); font-size:15px; } /* ========================================================= RESIDUAL ========================================================= */ .gapvmResidualFormula{ display:grid; grid-template-columns: 1fr 50px 1fr 50px 1.1fr; align-items:stretch; } .gapvmResidualFormula > div{ padding:25px; border:1px solid rgba(223,188,105,.20); background:rgba(255,255,255,.045); } .gapvmResidualFormula > .gapvmResidualMinus, .gapvmResidualFormula > .gapvmResidualEqual{ display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--gapvm-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:35px; } .gapvmResidualFormula span{ display:block; color:var(--gapvm-gold-light); font-size:15px; line-height:1.4; font-weight:900; } .gapvmResidualFormula strong{ display:block; margin-top:13px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:25px; line-height:1.25; } .gapvmResidualFormula p{ margin:12px 0 0; color:rgba(255,255,255,.60); font-size:15px; } .gapvmResidualCosts ul{ margin:15px 0 0; padding-left:18px; color:rgba(255,255,255,.67); } .gapvmResidualCosts li{ margin:5px 0; font-size:15px; } .gapvmResidualResult{ border-color:var(--gapvm-gold) !important; background: linear-gradient( 135deg, rgba(184,135,35,.18), rgba(255,255,255,.04) ) !important; } .gapvmResidualResult strong{ color:var(--gapvm-gold-light); } .gapvmApplicationBox{ margin-top:22px; padding:20px; border:1px solid rgba(223,188,105,.25); } .gapvmApplicationBox > strong{ color:var(--gapvm-gold-light); font-size:15px; } .gapvmApplicationBox div{ display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; } .gapvmApplicationBox span{ padding:8px 11px; border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.72); font-size:15px; } /* ========================================================= LAND & BUILDING SPLIT ========================================================= */ .gapvmSplitDiagram{ padding:30px; border:1px solid var(--gapvm-border); background:#f8fafc; } .gapvmSplitTotal{ width:210px; margin:auto; padding:20px; border:2px solid var(--gapvm-gold); text-align:center; background:#ffffff; } .gapvmSplitTotal span, .gapvmSplitColumns span{ display:block; color:var(--gapvm-gold); font-size:15px; line-height:1.4; font-weight:900; } .gapvmSplitTotal strong{ display:block; margin-top:5px; color:var(--gapvm-navy); font-family: Georgia, "Times New Roman", serif; font-size:31px; } .gapvmSplitConnector{ display:flex; justify-content:center; gap:105px; height:48px; } .gapvmSplitConnector span{ width:1px; background:var(--gapvm-gold); } .gapvmSplitColumns{ display:grid; grid-template-columns: repeat(2,1fr); gap:15px; } .gapvmSplitColumns > div{ padding:25px; border:1px solid var(--gapvm-border); background:#ffffff; } .gapvmSplitColumns strong{ display:block; margin-top:8px; color:var(--gapvm-deep); font-family: Georgia, "Times New Roman", serif; font-size:25px; } .gapvmSplitColumns p{ margin:10px 0 0; color:var(--gapvm-muted); font-size:15px; } .gapvmPurposeGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:15px; margin-top:22px; } .gapvmPurposeGrid > div{ padding:20px; border-top:3px solid var(--gapvm-navy); background:var(--gapvm-soft); } .gapvmPurposeGrid b{ display:block; color:var(--gapvm-gold); font-size:15px; } .gapvmPurposeGrid strong{ display:block; margin-top:7px; color:var(--gapvm-navy); font-size:16px; } .gapvmPurposeGrid p{ margin:6px 0 0; color:var(--gapvm-muted); font-size:15px; } .gapvmDominanceNote{ display:grid; grid-template-columns: repeat(2,1fr); gap:15px; margin-top:20px; } .gapvmDominanceNote > div{ display:flex; flex-direction:column; gap:5px; padding:16px; border-left:3px solid var(--gapvm-gold); } .gapvmDominanceNote strong{ color:var(--gapvm-navy); font-size:15px; } .gapvmDominanceNote span{ color:var(--gapvm-muted); font-size:15px; } /* ========================================================= SUMMARY ========================================================= */ .gapvmSummary{ padding:100px 24px; background:var(--gapvm-soft); } .gapvmSummaryHeader{ max-width:800px; margin:0 auto 45px; text-align:center; } .gapvmSummaryHeader span{ color:var(--gapvm-gold); font-size:15px; font-weight:900; letter-spacing:2px; } .gapvmSummaryHeader h2{ margin:13px 0 0; color:var(--gapvm-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(36px,4vw,51px); line-height:1.15; font-weight:500; } .gapvmSummaryHeader h2 strong{ color:var(--gapvm-navy); } .gapvmSummaryTable{ border:1px solid var(--gapvm-border); background:#ffffff; box-shadow: 0 20px 45px rgba(6,31,64,.06); } .gapvmSummaryRow{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; border-bottom:1px solid var(--gapvm-border); } .gapvmSummaryRow:last-child{ border-bottom:0; } .gapvmSummaryRow > *{ padding:19px 22px; border-right:1px solid var(--gapvm-border); font-size:15px; line-height:1.5; } .gapvmSummaryRow > *:last-child{ border-right:0; } .gapvmSummaryHead{ background:var(--gapvm-navy); color:#ffffff; } .gapvmSummaryHead > *{ color:#ffffff; font-weight:900; } .gapvmSummaryRow strong{ color:var(--gapvm-navy); } .gapvmSummaryRow span{ color:var(--gapvm-muted); } /* ========================================================= CTA ========================================================= */ .gapvmCTA{ position:relative; overflow:hidden; padding:75px 24px; color:#ffffff; background: radial-gradient( circle at 90% 40%, rgba(223,188,105,.16), transparent 25% ), linear-gradient( 135deg, var(--gapvm-deep), var(--gapvm-navy) ); } .gapvmCTAOrnament{ position:absolute; width:400px; height:400px; right:-250px; top:-180px; border:1px solid rgba(223,188,105,.18); border-radius:50%; } .gapvmCTAInner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:45px; padding:35px 0; } .gapvmCTAContent{ max-width:750px; } .gapvmCTAContent > span{ display:block; margin-bottom:10px; color:var(--gapvm-gold-light); font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvmCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(35px,4vw,52px); line-height:1.1; font-weight:500; } .gapvmCTAContent h2 strong{ color:var(--gapvm-gold-light); } .gapvmCTAContent p{ max-width:650px; margin:16px 0 0; color:rgba(255,255,255,.65); } .gapvmCTAContent p strong{ color:#ffffff; } .gapvmCTAActions{ display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:260px; } .gapvmCTAButton{ min-height:58px; display:flex; align-items:center; justify-content:center; gap:15px; padding:15px 24px; border:1px solid var(--gapvm-gold-light); background:var(--gapvm-gold); color:#ffffff; text-decoration:none; font-size:16px; line-height:1.3; font-weight:900; box-shadow: 0 14px 30px rgba(0,0,0,.20); transition:.25s ease; } .gapvmCTAButton b{ font-size:21px; } .gapvmCTAButton:hover{ color:#ffffff; background:#d09f35; transform:translateY(-2px); } .gapvmCTAPhone{ min-height:54px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(223,188,105,.42); color:#ffffff; background:rgba(255,255,255,.04); text-decoration:none; font-size:18px; font-weight:900; transition:.25s ease; } .gapvmCTAPhone span{ color:var(--gapvm-gold-light); } .gapvmCTAPhone:hover{ color:#ffffff; background:rgba(255,255,255,.09); border-color:var(--gapvm-gold-light); } /* ========================================================= TABLET ========================================================= */ @media(max-width:1000px){ .gapvmMapGrid{ grid-template-columns: repeat(2,1fr); } .gapvmMapItem:last-child{ grid-column:1 / -1; } .gapvmMethodGrid{ grid-template-columns:1fr; gap:50px; } .gapvmMethodIntro{ position:relative; top:auto; } .gapvmResidualFormula{ grid-template-columns:1fr; } .gapvmResidualFormula > .gapvmResidualMinus, .gapvmResidualFormula > .gapvmResidualEqual{ min-height:40px; } .gapvmCTAInner{ align-items:flex-start; flex-direction:column; } .gapvmCTAActions{ width:100%; max-width:380px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:650px){ .gapvmIntro, .gapvmMethodMap, .gapvmMethod, .gapvmSummary, .gapvmCTA{ padding-left:17px; padding-right:17px; } .gapvmIntro{ padding-top:70px; padding-bottom:70px; } .gapvmIntro h1{ font-size:42px; letter-spacing:-1.2px; } .gapvmIntroText{ font-size:17px !important; } .gapvmIntroTags span{ font-size:15px; padding:9px 11px; } /* METHOD MAP */ .gapvmMethodMap{ padding-top:70px; padding-bottom:70px; } .gapvmMapGrid{ grid-template-columns:1fr; } .gapvmMapItem:last-child{ grid-column:auto; } /* METHODS */ .gapvmMethod{ padding-top:75px; padding-bottom:75px; } .gapvmMethodNumber{ font-size:62px; } .gapvmMethodIntro h2{ font-size:40px; } .gapvmMethodIntro p{ font-size:15px; } .gapvmStep{ grid-template-columns:45px minmax(0,1fr); gap:13px; } .gapvmStep h3{ font-size:21px; } /* INCOME */ .gapvmFormulaGrid{ grid-template-columns:1fr; } .gapvmInputGrid{ grid-template-columns:1fr; } /* DRC */ .gapvmDRCFormula{ flex-direction:column; } .gapvmDRCFormula > i{ min-height:20px; } .gapvmDRCNotes{ grid-template-columns:1fr; } /* RESIDUAL */ .gapvmResidualFormula > div{ padding:21px; } /* LAND BUILDING */ .gapvmSplitDiagram{ padding:20px 15px; } .gapvmSplitColumns{ grid-template-columns:1fr; } .gapvmSplitConnector{ display:none; } .gapvmPurposeGrid{ grid-template-columns:1fr; } .gapvmDominanceNote{ grid-template-columns:1fr; } /* SUMMARY */ .gapvmSummary{ padding-top:70px; padding-bottom:70px; } .gapvmSummaryTable{ overflow:hidden; } .gapvmSummaryRow{ grid-template-columns:1fr; } .gapvmSummaryRow > *{ border-right:0; border-bottom:1px solid var(--gapvm-border); } .gapvmSummaryRow > *:last-child{ border-bottom:0; } .gapvmSummaryHead{ display:none; } /* CTA */ .gapvmCTA{ padding-top:60px; padding-bottom:60px; } .gapvmCTAContent h2{ font-size:36px; } .gapvmCTAActions{ max-width:none; } .gapvmCTAButton, .gapvmCTAPhone{ width:100%; } } /* ========================================================= SECTION 50C — PREMIUM PROPERTY VALUATION PAGE UNIQUE NAMESPACE: gapv50c- ROYAL NAVY + GOLD ========================================================= */ .gapv50c-hero *, .gapv50c-mechanism *, .gapv50c-applies *, .gapv50c-challenge *, .gapv50c-tolerance *, .gapv50c-mirror *, .gapv50c-final *{ box-sizing:border-box; } .gapv50c-hero, .gapv50c-mechanism, .gapv50c-applies, .gapv50c-challenge, .gapv50c-tolerance, .gapv50c-mirror, .gapv50c-final{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapv50c-hero p, .gapv50c-mechanism p, .gapv50c-applies p, .gapv50c-challenge p, .gapv50c-tolerance p, .gapv50c-mirror p, .gapv50c-final p{ font-size:16px; line-height:1.8; } /* ========================================================= SHARED EYEBROW ========================================================= */ .gapv50c-eyebrow{ display:block; margin-bottom:15px; color:#b88723; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapv50c-eyebrow-light{ display:block; margin-bottom:15px; color:#e2bd67; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } /* ========================================================= HERO ========================================================= */ .gapv50c-hero{ position:relative; overflow:hidden; padding:90px 24px 85px; color:#ffffff; background: radial-gradient( circle at 88% 15%, rgba(216,183,102,.13), transparent 27% ), linear-gradient( 135deg, #061f40 0%, #092f62 62%, #123f73 100% ); } .gapv50c-hero-pattern{ position:absolute; width:600px; height:600px; right:-330px; bottom:-400px; border:1px solid rgba(216,183,102,.16); border-radius:50%; } .gapv50c-hero-pattern:before{ content:""; position:absolute; inset:70px; border:1px solid rgba(216,183,102,.10); border-radius:50%; } .gapv50c-hero-inner{ position:relative; z-index:2; width:min(1180px,100%); margin:auto; } .gapv50c-hero-kicker{ display:flex; align-items:center; gap:13px; margin-bottom:25px; color:#e0ba60; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapv50c-hero-kicker span{ display:block; width:48px; height:2px; background:#d8b766; } .gapv50c-hero h1{ max-width:1050px; margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(48px,6vw,76px); line-height:1.02; letter-spacing:-2.5px; font-weight:500; } .gapv50c-hero h1 span{ display:block; margin-bottom:5px; color:#e0ba60; font-weight:700; } .gapv50c-hero-intro{ max-width:930px; margin:30px 0 0; color:rgba(255,255,255,.77); font-size:18px !important; line-height:1.85 !important; } .gapv50c-hero-intro strong{ color:#ffffff; font-weight:800; } /* ========================================================= HERO FACT STRIP ========================================================= */ .gapv50c-hero-facts{ display:grid; grid-template-columns: repeat(4,1fr); max-width:850px; margin-top:45px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gapv50c-hero-fact{ min-height:105px; display:flex; flex-direction:column; justify-content:center; padding:18px 22px; border-right:1px solid rgba(255,255,255,.10); } .gapv50c-hero-fact:last-child{ border-right:0; } .gapv50c-hero-fact strong{ color:#e0ba60; font-family: Georgia, "Times New Roman", serif; font-size:30px; line-height:1.1; } .gapv50c-hero-fact span{ margin-top:6px; color:rgba(255,255,255,.60); font-size:15px; line-height:1.4; } /* ========================================================= HERO CTA ========================================================= */ .gapv50c-hero-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:38px; } .gapv50c-primary-btn{ min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:14px 25px; background:#c5962f; border:1px solid #e0bd69; color:#ffffff; text-decoration:none; font-size:16px; line-height:1.3; font-weight:900; box-shadow: 0 15px 35px rgba(0,0,0,.22); transition:.25s ease; } .gapv50c-primary-btn b{ font-size:22px; } .gapv50c-primary-btn:hover{ color:#ffffff; background:#d3a13c; transform:translateY(-2px); } .gapv50c-phone-btn{ min-height:58px; display:flex; align-items:center; gap:12px; padding:9px 18px; border:1px solid rgba(224,189,105,.45); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapv50c-phone-btn:hover{ color:#ffffff; background:rgba(255,255,255,.09); border-color:#e0bd69; } .gapv50c-phone-icon{ width:39px; height:39px; display:flex; align-items:center; justify-content:center; border:1px solid #d8b766; color:#e0bd69; font-size:18px; } .gapv50c-phone-btn small{ display:block; color:rgba(255,255,255,.55); font-size:15px; line-height:1.3; } .gapv50c-phone-btn strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; } /* ========================================================= SECTION 01 — MECHANISM ========================================================= */ .gapv50c-mechanism{ padding:100px 24px; background:#fbfaf7; } .gapv50c-mechanism .container, .gapv50c-applies .container, .gapv50c-challenge .container, .gapv50c-tolerance .container, .gapv50c-mirror .container{ width:min(1180px,100%); margin:auto; } .gapv50c-section-heading{ max-width:820px; margin:0 auto 55px; text-align:center; } .gapv50c-section-heading h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(37px,4.5vw,55px); line-height:1.13; font-weight:500; } .gapv50c-section-heading h2 strong{ color:#092f62; font-weight:700; } .gapv50c-mechanism-layout{ display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; } .gapv50c-mechanism-content{ padding-right:20px; } .gapv50c-mechanism-content p{ margin:0 0 20px; color:#58697a; } .gapv50c-mechanism-content strong{ color:#092f62; font-weight:800; } .gapv50c-mechanism-visual{ padding:35px; border:1px solid rgba(9,47,98,.12); background:#ffffff; box-shadow: 0 20px 50px rgba(6,31,64,.07); } .gapv50c-value-card{ padding:24px; border:1px solid rgba(9,47,98,.12); } .gapv50c-value-card span{ display:block; color:#b88723; font-size:15px; font-weight:900; letter-spacing:1.4px; } .gapv50c-value-card strong{ display:block; margin-top:8px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:27px; line-height:1.2; } .gapv50c-value-card small{ display:block; margin-top:5px; color:#718096; font-size:15px; } .gapv50c-value-sdv{ border-color:rgba(197,150,47,.40); background:#fcf8ee; } .gapv50c-value-arrow{ height:45px; display:flex; align-items:center; justify-content:center; color:#b88723; font-size:27px; font-weight:900; } .gapv50c-value-result{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:22px; padding:18px 20px; background:#092f62; } .gapv50c-value-result strong{ color:#e0bd69; font-size:15px; letter-spacing:1px; } .gapv50c-value-result span{ color:rgba(255,255,255,.75); font-size:15px; } /* ========================================================= SECTION 02 — WHEN IT APPLIES ========================================================= */ .gapv50c-applies{ padding:105px 24px; background:#ffffff; } .gapv50c-applies-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:55px; } .gapv50c-applies-header h2{ max-width:800px; margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,54px); line-height:1.12; font-weight:500; } .gapv50c-applies-header h2 strong{ color:#092f62; } .gapv50c-applies-marker{ min-width:145px; padding:20px; border-top:3px solid #b88723; border-bottom:1px solid rgba(9,47,98,.15); text-align:center; } .gapv50c-applies-marker strong{ display:block; color:#092f62; font-family: Georgia, "Times New Roman", serif; font-size:38px; } .gapv50c-applies-marker span{ display:block; margin-top:5px; color:#718096; font-size:15px; } .gapv50c-applies-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; } .gapv50c-apply-card{ position:relative; min-height:360px; padding:30px; border:1px solid rgba(9,47,98,.12); background:#f8fafc; overflow:hidden; transition:.3s ease; } .gapv50c-apply-card:hover{ transform:translateY(-5px); box-shadow: 0 22px 45px rgba(6,31,64,.09); } .gapv50c-apply-card:after{ content:""; position:absolute; width:100px; height:100px; right:-50px; bottom:-50px; border:1px solid rgba(197,150,47,.20); border-radius:50%; } .gapv50c-apply-card-gold{ background: linear-gradient( 145deg, #fffdf8, #f8f1df ); border-color:rgba(197,150,47,.30); } .gapv50c-card-number{ display:block; color:#b88723; font-family: Georgia, "Times New Roman", serif; font-size:42px; line-height:1; } .gapv50c-card-icon{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; margin-top:25px; border:1px solid rgba(9,47,98,.16); color:#092f62; font-size:15px; font-weight:900; } .gapv50c-apply-card h3{ margin:22px 0 15px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:27px; line-height:1.2; font-weight:500; } .gapv50c-apply-card h3 strong{ color:#092f62; font-weight:700; } .gapv50c-apply-card p{ margin:0; color:#617286; } .gapv50c-apply-card p strong{ color:#092f62; } /* ========================================================= SECTION 03 — CHALLENGE ========================================================= */ .gapv50c-challenge{ position:relative; overflow:hidden; padding:105px 24px; background: radial-gradient( circle at 90% 10%, rgba(224,189,105,.12), transparent 25% ), #061f40; color:#ffffff; } .gapv50c-challenge-glow{ position:absolute; width:450px; height:450px; left:-300px; bottom:-280px; border:1px solid rgba(224,189,105,.14); border-radius:50%; } .gapv50c-challenge-header{ max-width:850px; margin-bottom:60px; } .gapv50c-challenge-header h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4.5vw,57px); line-height:1.1; font-weight:500; } .gapv50c-challenge-header h2 strong{ color:#e0bd69; } .gapv50c-challenge-header p{ max-width:750px; margin:20px 0 0; color:rgba(255,255,255,.63); } .gapv50c-challenge-flow{ display:grid; grid-template-columns: 1fr 45px 1fr 45px 1fr 45px 1fr; align-items:center; } .gapv50c-flow-item{ min-height:280px; padding:27px 20px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); } .gapv50c-flow-no{ display:flex; align-items:center; justify-content:center; width:43px; height:43px; margin-bottom:22px; border:1px solid rgba(224,189,105,.55); color:#e0bd69; font-size:15px; font-weight:900; } .gapv50c-flow-item > strong{ display:block; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:21px; line-height:1.3; } .gapv50c-flow-item p{ margin:13px 0 0; color:rgba(255,255,255,.58); font-size:15px; line-height:1.7; } .gapv50c-flow-item p strong{ color:#ffffff; } .gapv50c-flow-line{ height:1px; background: linear-gradient( 90deg, transparent, #b88723, transparent ); } .gapv50c-challenge-note{ display:grid; grid-template-columns:80px 1fr; gap:20px; align-items:center; margin-top:45px; padding:25px; border:1px solid rgba(224,189,105,.30); background:rgba(197,150,47,.08); } .gapv50c-note-symbol{ width:65px; height:65px; display:flex; align-items:center; justify-content:center; border:1px solid #b88723; color:#e0bd69; font-size:15px; font-weight:900; } .gapv50c-challenge-note strong{ color:#ffffff; font-size:17px; } .gapv50c-challenge-note p{ margin:6px 0 0; color:rgba(255,255,255,.62); font-size:15px; } .gapv50c-challenge-note p strong{ color:#ffffff; } /* ========================================================= SECTION 04 — TOLERANCE ========================================================= */ .gapv50c-tolerance{ padding:105px 24px; background:#f7f8fa; } .gapv50c-tolerance-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; } .gapv50c-tolerance-copy h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4.2vw,55px); line-height:1.1; font-weight:500; } .gapv50c-tolerance-copy h2 strong{ color:#092f62; } .gapv50c-tolerance-copy p{ margin:19px 0 0; color:#617286; } .gapv50c-tolerance-copy p strong{ color:#092f62; } .gapv50c-tolerance-visual{ padding:40px; border:1px solid rgba(9,47,98,.12); background:#ffffff; box-shadow: 0 20px 50px rgba(6,31,64,.06); } .gapv50c-tolerance-scale{ position:relative; padding-top:10px; } .gapv50c-scale-label{ display:flex; align-items:center; justify-content:space-between; } .gapv50c-scale-label span{ color:#718096; font-size:15px; font-weight:900; letter-spacing:1px; } .gapv50c-scale-label strong{ color:#092f62; font-family: Georgia, "Times New Roman", serif; font-size:28px; } .gapv50c-scale-track{ position:relative; height:30px; margin:25px 0 15px; background:#e6e9ed; } .gapv50c-scale-safe{ position:absolute; left:0; top:0; width:90%; height:100%; background: linear-gradient( 90deg, #092f62, #1c527f ); } .gapv50c-scale-marker{ position:absolute; right:10%; top:-35px; display:flex; flex-direction:column; align-items:center; color:#b88723; } .gapv50c-scale-marker:after{ content:""; width:2px; height:60px; margin-top:5px; background:#c5962f; } .gapv50c-scale-marker b{ font-size:15px; } .gapv50c-scale-marker small{ font-size:15px; } .gapv50c-scale-right{ margin-top:3px; } .gapv50c-tolerance-callout{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:40px; padding:18px 20px; background:#092f62; } .gapv50c-tolerance-callout strong{ color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:27px; } .gapv50c-tolerance-callout span{ color:rgba(255,255,255,.70); font-size:15px; } .gapv50c-tolerance-disclaimer{ margin:18px 0 0; color:#7a8795; font-size:15px !important; line-height:1.65 !important; } /* ========================================================= SECTION 05 — BUYER MIRROR ========================================================= */ .gapv50c-mirror{ padding:105px 24px; background:#ffffff; } .gapv50c-mirror-header{ max-width:850px; margin-bottom:60px; } .gapv50c-mirror-header h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4.2vw,55px); line-height:1.1; font-weight:500; } .gapv50c-mirror-header h2 strong{ color:#092f62; } .gapv50c-mirror-header p{ margin:20px 0 0; color:#617286; } .gapv50c-mirror-header p strong{ color:#092f62; } .gapv50c-mirror-layout{ display:grid; grid-template-columns: 1fr 160px 1fr; gap:25px; align-items:center; } .gapv50c-mirror-card{ min-height:275px; padding:32px; border:1px solid rgba(9,47,98,.13); background:#f8fafc; } .gapv50c-mirror-card > span{ display:block; margin-bottom:15px; color:#b88723; font-size:15px; font-weight:900; letter-spacing:2px; } .gapv50c-mirror-card > strong{ display:block; color:#092f62; font-family: Georgia, "Times New Roman", serif; font-size:35px; line-height:1.1; } .gapv50c-mirror-card p{ margin:17px 0 0; color:#637386; } .gapv50c-mirror-card p strong{ color:#092f62; } .gapv50c-mirror-buyer{ background: linear-gradient( 145deg, #fffdf8, #faf4e4 ); border-color:rgba(197,150,47,.28); } .gapv50c-mirror-center{ display:flex; flex-direction:column; align-items:center; text-align:center; } .gapv50c-mirror-center div{ width:105px; height:105px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:2px solid #c5962f; color:#092f62; background:#fffdf8; font-family: Georgia, "Times New Roman", serif; font-size:27px; font-weight:700; } .gapv50c-mirror-center span{ max-width:145px; margin-top:13px; color:#718096; font-size:15px; line-height:1.45; } .gapv50c-mirror-conclusion{ display:grid; grid-template-columns:70px 1fr; gap:20px; align-items:center; margin-top:45px; padding:25px; border-left:4px solid #b88723; background:#f7f8fa; } .gapv50c-conclusion-icon{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; border:1px solid #c5962f; color:#b88723; font-size:15px; font-weight:900; } .gapv50c-mirror-conclusion strong{ display:block; color:#092f62; font-size:18px; } .gapv50c-mirror-conclusion p{ margin:6px 0 0; color:#66778a; font-size:15px; } .gapv50c-mirror-conclusion p strong{ display:inline; color:#092f62; font-size:inherit; } /* ========================================================= FINAL CTA ========================================================= */ .gapv50c-final{ position:relative; overflow:hidden; padding:75px 24px; background: linear-gradient( 135deg, #061f40, #092f62 ); } .gapv50c-final-pattern{ position:absolute; width:420px; height:420px; right:-240px; top:-220px; border:1px solid rgba(224,189,105,.16); border-radius:50%; } .gapv50c-final-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:50px; width:min(1180px,100%); margin:auto; } .gapv50c-final-copy{ max-width:720px; } .gapv50c-final-copy > span{ display:block; margin-bottom:12px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapv50c-final-copy h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(36px,4vw,52px); line-height:1.12; font-weight:500; } .gapv50c-final-copy h2 strong{ color:#e0bd69; } .gapv50c-final-copy p{ margin:17px 0 0; color:rgba(255,255,255,.63); } .gapv50c-final-copy p strong{ color:#ffffff; } .gapv50c-final-actions{ display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:245px; } .gapv50c-final-button{ min-height:58px; display:flex; align-items:center; justify-content:center; gap:18px; padding:15px 22px; background:#c5962f; border:1px solid #e0bd69; color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; box-shadow: 0 15px 35px rgba(0,0,0,.20); transition:.25s ease; } .gapv50c-final-button b{ font-size:22px; } .gapv50c-final-button:hover{ color:#ffffff; background:#d3a13c; transform:translateY(-2px); } .gapv50c-final-phone{ min-height:55px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(224,189,105,.40); color:#ffffff; background:rgba(255,255,255,.045); text-decoration:none; font-size:17px; transition:.25s ease; } .gapv50c-final-phone:hover{ color:#ffffff; border-color:#e0bd69; background:rgba(255,255,255,.08); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1000px){ .gapv50c-mechanism-layout, .gapv50c-tolerance-grid{ grid-template-columns:1fr; gap:45px; } .gapv50c-mechanism-content{ padding-right:0; } .gapv50c-challenge-flow{ grid-template-columns: 1fr 35px 1fr; row-gap:20px; } .gapv50c-flow-line:nth-of-type(2){ display:none; } .gapv50c-flow-item:nth-of-type(3){ grid-column:1; } .gapv50c-flow-item:nth-of-type(4){ grid-column:3; } .gapv50c-flow-line:nth-of-type(3){ display:none; } .gapv50c-mirror-layout{ grid-template-columns: 1fr; } .gapv50c-mirror-center{ order:2; } .gapv50c-mirror-buyer{ order:3; } .gapv50c-mirror-center div{ width:85px; height:85px; } .gapv50c-final-inner{ align-items:flex-start; flex-direction:column; } .gapv50c-final-actions{ width:100%; max-width:380px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:700px){ .gapv50c-hero, .gapv50c-mechanism, .gapv50c-applies, .gapv50c-challenge, .gapv50c-tolerance, .gapv50c-mirror{ padding:70px 17px; } .gapv50c-final{ padding:65px 17px; } .gapv50c-hero h1{ font-size:43px; letter-spacing:-1.3px; } .gapv50c-hero-intro{ font-size:17px !important; } .gapv50c-hero-facts{ grid-template-columns: repeat(2,1fr); } .gapv50c-hero-fact:nth-child(2){ border-right:0; } .gapv50c-hero-fact{ border-bottom:1px solid rgba(255,255,255,.10); } .gapv50c-hero-cta{ flex-direction:column; align-items:stretch; } .gapv50c-primary-btn, .gapv50c-phone-btn{ width:100%; justify-content:center; } .gapv50c-section-heading h2, .gapv50c-applies-header h2, .gapv50c-tolerance-copy h2, .gapv50c-mirror-header h2{ font-size:35px; } .gapv50c-applies-header{ align-items:flex-start; flex-direction:column; } .gapv50c-applies-marker{ width:100%; } .gapv50c-applies-grid{ grid-template-columns:1fr; } .gapv50c-apply-card{ min-height:auto; } .gapv50c-challenge-header h2{ font-size:36px; } .gapv50c-challenge-flow{ display:flex; flex-direction:column; align-items:stretch; } .gapv50c-flow-line{ width:1px; height:28px; margin:auto; background: linear-gradient( 180deg, transparent, #b88723, transparent ); } .gapv50c-flow-item{ min-height:auto; } .gapv50c-challenge-note{ grid-template-columns:1fr; } .gapv50c-tolerance-visual{ padding:25px 18px; } .gapv50c-scale-label span{ font-size:15px; } .gapv50c-tolerance-callout{ align-items:flex-start; flex-direction:column; gap:5px; } .gapv50c-mirror-card{ min-height:auto; } .gapv50c-mirror-conclusion{ grid-template-columns:1fr; } .gapv50c-final-copy h2{ font-size:35px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .gapv50c-hero h1{ font-size:38px; } .gapv50c-hero-fact{ padding:16px; } .gapv50c-hero-fact strong{ font-size:26px; } .gapv50c-section-heading h2, .gapv50c-applies-header h2, .gapv50c-challenge-header h2, .gapv50c-tolerance-copy h2, .gapv50c-mirror-header h2, .gapv50c-final-copy h2{ font-size:31px; } } /* ========================================================= FINANCE ACT 2024 / SECTION 55(2)(b) PREMIUM VALUATION PAGE UNIQUE NAMESPACE: f24l- ========================================================= */ :root{ --f24l-navy:#092f62; --f24l-deep:#061f40; --f24l-blue:#123f73; --f24l-gold:#c5962f; --f24l-gold-light:#e0bd69; --f24l-gold-pale:#f5ead0; --f24l-white:#ffffff; --f24l-ivory:#fcfbf8; --f24l-light:#f4f7fa; --f24l-text:#405267; --f24l-muted:#718096; --f24l-border:rgba(9,47,98,.13); } /* ========================================================= GLOBAL PAGE SETTINGS ========================================================= */ .f24l-hero *, .f24l-change *, .f24l-anchor *, .f24l-certificate *, .f24l-comparison *, .f24l-final-cta *{ box-sizing:border-box; } .f24l-hero, .f24l-change, .f24l-anchor, .f24l-certificate, .f24l-comparison, .f24l-final-cta{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .f24l-container{ width:min(1220px,100%); margin:auto; } .f24l-hero p, .f24l-change p, .f24l-anchor p, .f24l-certificate p, .f24l-comparison p, .f24l-final-cta p{ font-size:16px; line-height:1.8; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .f24l-hero{ position:relative; overflow:hidden; padding:92px 24px 90px; color:#ffffff; background: radial-gradient( circle at 84% 18%, rgba(224,189,105,.14), transparent 27% ), linear-gradient( 135deg, #061f40 0%, #092f62 58%, #123f73 100% ); } .f24l-hero-orbit{ position:absolute; border:1px solid rgba(224,189,105,.13); border-radius:50%; pointer-events:none; } .f24l-hero-orbit-one{ width:700px; height:700px; right:-390px; top:-280px; } .f24l-hero-orbit-two{ width:380px; height:380px; left:-250px; bottom:-220px; } .f24l-hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap:80px; align-items:center; } .f24l-eyebrow{ display:flex; align-items:center; gap:13px; margin-bottom:22px; color:var(--f24l-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .f24l-eyebrow span{ width:45px; height:2px; background:var(--f24l-gold-light); } .f24l-hero h1{ max-width:850px; margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(48px,5.5vw,76px); line-height:1.02; letter-spacing:-2.5px; font-weight:500; } .f24l-hero h1 strong{ color:var(--f24l-gold-light); font-weight:700; } .f24l-hero h1 em{ color:#ffffff; font-style:normal; border-bottom:2px solid var(--f24l-gold); } .f24l-hero-intro{ max-width:820px; margin:30px 0 25px; color:rgba(255,255,255,.76); font-size:18px !important; line-height:1.85 !important; } .f24l-hero-intro strong{ color:#ffffff; font-weight:800; } /* HERO HIGHLIGHT */ .f24l-hero-highlight{ max-width:760px; display:flex; align-items:center; gap:22px; margin:25px 0 30px; padding:20px 22px; border-left:3px solid var(--f24l-gold-light); background:rgba(255,255,255,.055); } .f24l-highlight-number{ color:var(--f24l-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:40px; line-height:1; font-weight:700; } .f24l-hero-highlight strong{ display:block; color:#ffffff; font-size:17px; line-height:1.4; } .f24l-hero-highlight p{ margin:4px 0 0; color:rgba(255,255,255,.62); font-size:15px; line-height:1.6; } /* HERO ACTIONS */ .f24l-hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:13px; } .f24l-primary-btn{ min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:14px 23px; background:var(--f24l-gold); border:1px solid var(--f24l-gold-light); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; box-shadow:0 15px 35px rgba(0,0,0,.22); transition:.25s ease; } .f24l-primary-btn span{ font-size:21px; } .f24l-primary-btn:hover{ color:#ffffff; background:#d2a33e; transform:translateY(-2px); } .f24l-phone-btn{ min-height:58px; display:flex; align-items:center; gap:12px; padding:9px 17px; border:1px solid rgba(224,189,105,.45); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; transition:.25s ease; } .f24l-phone-btn:hover{ color:#ffffff; border-color:var(--f24l-gold-light); background:rgba(255,255,255,.09); } .f24l-phone-icon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--f24l-gold-light); color:var(--f24l-gold-light); font-size:18px; } .f24l-phone-btn small{ display:block; color:rgba(255,255,255,.55); font-size:15px; } .f24l-phone-btn strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; } /* HERO RATE PANEL */ .f24l-hero-panel{ position:relative; padding:28px; border:1px solid rgba(224,189,105,.32); background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.025) ); box-shadow: 0 35px 75px rgba(0,0,0,.22); } .f24l-panel-label{ margin-bottom:25px; color:var(--f24l-gold-light); font-size:15px; font-weight:900; letter-spacing:2px; } .f24l-rate-card{ padding:25px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); } .f24l-rate-card-gold{ border-color:rgba(224,189,105,.48); background: linear-gradient( 135deg, rgba(197,150,47,.17), rgba(255,255,255,.035) ); } .f24l-rate-card span{ display:block; color:rgba(255,255,255,.58); font-size:15px; font-weight:900; letter-spacing:1.3px; } .f24l-rate-card strong{ display:block; margin:7px 0 2px; color:var(--f24l-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:58px; line-height:1; } .f24l-rate-card small{ color:rgba(255,255,255,.65); font-size:15px; } .f24l-vs{ display:flex; align-items:center; justify-content:center; width:45px; height:45px; margin:-1px auto; position:relative; z-index:2; border:1px solid rgba(224,189,105,.45); border-radius:50%; background:var(--f24l-deep); color:var(--f24l-gold-light); font-size:15px; font-weight:900; } .f24l-panel-foot{ display:flex; flex-direction:column; gap:5px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10); } .f24l-panel-foot strong{ color:#ffffff; font-size:15px; } .f24l-panel-foot span{ color:rgba(255,255,255,.58); font-size:15px; line-height:1.55; } /* ========================================================= SECTION 02 — CHANGE / METHODS ========================================================= */ .f24l-change{ padding:105px 24px; background:var(--f24l-ivory); } .f24l-section-heading{ max-width:850px; margin:0 auto 55px; text-align:center; } .f24l-section-heading > span{ display:block; margin-bottom:13px; color:var(--f24l-gold); font-size:15px; font-weight:900; letter-spacing:2px; } .f24l-section-heading h2{ margin:0; color:var(--f24l-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,54px); line-height:1.15; font-weight:500; } .f24l-section-heading h2 strong{ color:var(--f24l-navy); font-weight:700; } .f24l-section-heading p{ margin:18px auto 0; color:var(--f24l-muted); } .f24l-method-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; } .f24l-method-card{ position:relative; padding:35px; border:1px solid var(--f24l-border); background:#ffffff; box-shadow: 0 18px 45px rgba(6,31,64,.055); } .f24l-method-card-featured{ border-color:rgba(197,150,47,.42); background: linear-gradient( 145deg, #ffffff, #fbf7ed ); } .f24l-method-card:before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--f24l-navy); } .f24l-method-card-featured:before{ background:var(--f24l-gold); } .f24l-method-top{ display:flex; align-items:center; justify-content:space-between; } .f24l-method-number{ color:var(--f24l-gold); font-family: Georgia, "Times New Roman", serif; font-size:48px; line-height:1; font-weight:700; } .f24l-method-tag{ padding:7px 10px; border:1px solid rgba(9,47,98,.13); color:var(--f24l-navy); font-size:15px; font-weight:900; letter-spacing:1px; } .f24l-method-card h3{ margin:24px 0 5px; color:var(--f24l-deep); font-family: Georgia, "Times New Roman", serif; font-size:34px; } .f24l-method-title{ margin:0 0 22px; color:var(--f24l-navy); } .f24l-method-title strong{ font-weight:900; } .f24l-formula{ margin-bottom:22px; padding:19px; border-left:3px solid var(--f24l-gold); background:var(--f24l-light); color:var(--f24l-deep); font-size:17px; line-height:1.6; font-weight:800; } .f24l-method-card p{ color:var(--f24l-text); } .f24l-method-card p strong{ color:var(--f24l-navy); } .f24l-method-note{ display:flex; flex-direction:column; gap:5px; margin-top:25px; padding:18px; border:1px solid var(--f24l-border); background:#fafafa; } .f24l-method-note strong{ color:var(--f24l-navy); font-size:15px; } .f24l-method-note span{ color:var(--f24l-muted); font-size:15px; line-height:1.6; } .f24l-method-note span strong{ display:inline; } .f24l-transition-strip{ display:flex; align-items:center; gap:20px; max-width:800px; margin:35px auto 0; padding:20px 24px; border:1px solid rgba(197,150,47,.3); background:#fffaf0; } .f24l-transition-icon{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%; background:var(--f24l-navy); color:var(--f24l-gold-light); font-size:15px; font-weight:900; } .f24l-transition-strip strong{ display:block; color:var(--f24l-navy); font-size:17px; } .f24l-transition-strip span{ display:block; margin-top:3px; color:var(--f24l-muted); font-size:15px; } /* ========================================================= SECTION 03 — SECTION 55(2)(b) ========================================================= */ .f24l-anchor{ padding:105px 24px; background:#ffffff; } .f24l-anchor-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:70px; align-items:start; } .f24l-anchor-marker{ position:sticky; top:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px; border:1px solid rgba(197,150,47,.35); background: linear-gradient( 145deg, #fbf7ed, #ffffff ); } .f24l-anchor-marker span{ color:var(--f24l-navy); font-family: Georgia, "Times New Roman", serif; font-size:68px; line-height:.9; font-weight:700; } .f24l-anchor-marker strong{ margin-top:5px; color:var(--f24l-gold); font-size:27px; } .f24l-anchor-marker small{ margin-top:17px; color:var(--f24l-muted); font-size:15px; font-weight:900; letter-spacing:1.5px; } .f24l-eyebrow-dark{ color:var(--f24l-gold); } .f24l-anchor-content h2{ max-width:850px; margin:0 0 24px; color:var(--f24l-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4vw,57px); line-height:1.12; font-weight:500; } .f24l-anchor-content h2 strong{ color:var(--f24l-navy); font-weight:700; } .f24l-anchor-content > p{ max-width:850px; color:var(--f24l-text); } .f24l-anchor-content > p strong{ color:var(--f24l-navy); } .f24l-anchor-callout{ display:flex; align-items:flex-start; gap:18px; max-width:850px; margin:30px 0; padding:22px; border-left:4px solid var(--f24l-gold); background:#fbf7ed; } .f24l-callout-icon{ width:62px; height:62px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border:1px solid rgba(197,150,47,.45); color:var(--f24l-gold); font-size:15px; font-weight:900; } .f24l-anchor-callout strong{ display:block; color:var(--f24l-navy); font-size:17px; } .f24l-anchor-callout p{ margin:5px 0 0; color:var(--f24l-muted); font-size:15px; line-height:1.65; } .f24l-secondary-btn{ min-height:55px; display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:13px 22px; background:var(--f24l-navy); border:1px solid var(--f24l-navy); color:#ffffff; text-decoration:none; font-size:15px; font-weight:900; transition:.25s ease; } .f24l-secondary-btn:hover{ color:#ffffff; background:var(--f24l-gold); border-color:var(--f24l-gold); transform:translateY(-2px); } /* ========================================================= SECTION 04 — CERTIFICATE ========================================================= */ .f24l-certificate{ padding:105px 24px; background: linear-gradient( 135deg, #f4f7fa, #ffffff ); } .f24l-certificate-heading{ max-width:900px; margin-bottom:50px; } .f24l-certificate-heading > span{ color:var(--f24l-gold); font-size:15px; font-weight:900; letter-spacing:2px; } .f24l-certificate-heading h2{ margin:12px 0 0; color:var(--f24l-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,54px); line-height:1.15; font-weight:500; } .f24l-certificate-heading h2 strong{ color:var(--f24l-navy); } .f24l-certificate-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; border:1px solid var(--f24l-border); background:var(--f24l-border); } .f24l-certificate-step{ display:grid; grid-template-columns:60px minmax(0,1fr); gap:20px; padding:30px; background:#ffffff; } .f24l-step-number{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(197,150,47,.45); color:var(--f24l-gold); font-size:15px; font-weight:900; } .f24l-certificate-step strong{ display:block; color:var(--f24l-navy); font-size:17px; line-height:1.4; } .f24l-certificate-step p{ margin:8px 0 0; color:var(--f24l-text); } .f24l-certificate-step p strong{ display:inline; font-size:inherit; } .f24l-document-banner{ display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:30px; padding:24px 27px; border:1px solid rgba(197,150,47,.32); background:#fffaf0; } .f24l-document-banner span{ display:block; margin-bottom:4px; color:var(--f24l-gold); font-size:15px; font-weight:900; letter-spacing:1.4px; } .f24l-document-banner strong{ color:var(--f24l-navy); font-size:18px; } .f24l-document-banner a{ min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border:1px solid var(--f24l-navy); color:var(--f24l-navy); text-decoration:none; font-size:15px; font-weight:900; white-space:nowrap; transition:.25s ease; } .f24l-document-banner a:hover{ color:#ffffff; background:var(--f24l-navy); } .f24l-document-banner a span{ margin:0; color:inherit; } /* ========================================================= SECTION 05 — COMPARISON ========================================================= */ .f24l-comparison{ padding:105px 24px; background:var(--f24l-ivory); } .f24l-comparison-header{ display:grid; grid-template-columns: 1fr .65fr; gap:70px; align-items:end; margin-bottom:45px; } .f24l-comparison-header > div > span{ color:var(--f24l-gold); font-size:15px; font-weight:900; letter-spacing:2px; } .f24l-comparison-header h2{ margin:12px 0 0; color:var(--f24l-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(39px,4vw,55px); line-height:1.12; font-weight:500; } .f24l-comparison-header h2 strong{ color:var(--f24l-navy); } .f24l-comparison-header > p{ margin:0; color:var(--f24l-muted); } .f24l-comparison-table{ border:1px solid var(--f24l-border); background:#ffffff; } .f24l-table-head{ display:grid; grid-template-columns: 1fr 1fr; padding:18px 25px; background:var(--f24l-navy); color:#ffffff; font-size:15px; font-weight:900; letter-spacing:.8px; } .f24l-table-row{ display:grid; grid-template-columns: 1fr 1fr; border-top:1px solid var(--f24l-border); } .f24l-table-row > div{ padding:27px 25px; } .f24l-table-row > div + div{ border-left:1px solid var(--f24l-border); } .f24l-table-row strong{ display:block; color:var(--f24l-navy); font-size:17px; line-height:1.45; } .f24l-table-row small{ display:block; margin-top:6px; color:var(--f24l-muted); font-size:15px; line-height:1.55; } .f24l-gold-text{ color:var(--f24l-gold) !important; } .f24l-advisory-note{ display:flex; align-items:flex-start; gap:18px; margin-top:28px; padding:22px; border-left:4px solid var(--f24l-gold); background:#fffaf0; } .f24l-advisory-icon{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--f24l-navy); color:var(--f24l-gold-light); font-size:15px; font-weight:900; } .f24l-advisory-note p{ margin:0; color:var(--f24l-text); } .f24l-advisory-note strong{ color:var(--f24l-navy); } /* ========================================================= SECTION 06 — FINAL CTA ========================================================= */ .f24l-final-cta{ position:relative; overflow:hidden; padding:70px 24px; background: linear-gradient( 135deg, #061f40, #092f62 ); } .f24l-cta-glow{ position:absolute; width:500px; height:500px; right:-260px; top:-280px; border:1px solid rgba(224,189,105,.14); border-radius:50%; } .f24l-final-box{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:50px; padding:42px; border:1px solid rgba(224,189,105,.35); background: linear-gradient( 110deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ); } .f24l-final-content{ max-width:760px; } .f24l-final-content > span{ color:var(--f24l-gold-light); font-size:15px; font-weight:900; letter-spacing:1.7px; } .f24l-final-content h2{ margin:10px 0 10px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(35px,4vw,52px); line-height:1.12; font-weight:500; } .f24l-final-content h2 strong{ color:var(--f24l-gold-light); } .f24l-final-content p{ margin:0; color:rgba(255,255,255,.62); } .f24l-final-actions{ display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:245px; } .f24l-final-button{ min-height:57px; display:flex; align-items:center; justify-content:center; gap:14px; padding:13px 20px; background:var(--f24l-gold); border:1px solid var(--f24l-gold-light); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; transition:.25s ease; } .f24l-final-button span{ font-size:21px; } .f24l-final-button:hover{ color:#ffffff; background:#d2a33e; transform:translateY(-2px); } .f24l-final-phone{ min-height:57px; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; border:1px solid rgba(224,189,105,.45); color:#ffffff; text-decoration:none; font-size:17px; font-weight:900; } .f24l-final-phone:hover{ color:#ffffff; border-color:var(--f24l-gold-light); background:rgba(255,255,255,.06); } /* ========================================================= RESPONSIVE — TABLET ========================================================= */ @media (max-width:950px){ .f24l-hero-grid{ grid-template-columns:1fr; gap:50px; } .f24l-hero-content{ max-width:850px; } .f24l-hero-panel{ max-width:650px; } .f24l-anchor-layout{ grid-template-columns:150px minmax(0,1fr); gap:40px; } .f24l-comparison-header{ grid-template-columns:1fr; gap:20px; } .f24l-final-box{ flex-direction:column; align-items:flex-start; } .f24l-final-actions{ width:100%; flex-direction:row; flex-wrap:wrap; } .f24l-final-button, .f24l-final-phone{ flex:1; } } /* ========================================================= RESPONSIVE — MOBILE ========================================================= */ @media (max-width:650px){ .f24l-hero, .f24l-change, .f24l-anchor, .f24l-certificate, .f24l-comparison, .f24l-final-cta{ padding-left:17px; padding-right:17px; } .f24l-hero{ padding-top:65px; padding-bottom:65px; } .f24l-hero h1{ font-size:43px; letter-spacing:-1.4px; } .f24l-hero-intro{ font-size:17px !important; } .f24l-hero-highlight{ align-items:flex-start; padding:17px; } .f24l-highlight-number{ font-size:31px; } .f24l-hero-actions{ width:100%; flex-direction:column; align-items:stretch; } .f24l-primary-btn, .f24l-phone-btn{ width:100%; justify-content:center; } .f24l-hero-panel{ padding:20px; } .f24l-rate-card{ padding:20px; } .f24l-rate-card strong{ font-size:49px; } .f24l-change, .f24l-anchor, .f24l-certificate, .f24l-comparison{ padding-top:72px; padding-bottom:72px; } .f24l-section-heading h2, .f24l-anchor-content h2, .f24l-certificate-heading h2, .f24l-comparison-header h2{ font-size:34px; } .f24l-method-grid{ grid-template-columns:1fr; } .f24l-method-card{ padding:27px 22px; } .f24l-anchor-layout{ grid-template-columns:1fr; gap:30px; } .f24l-anchor-marker{ position:relative; top:auto; min-height:170px; max-width:190px; margin:auto; } .f24l-anchor-marker span{ font-size:55px; } .f24l-certificate-grid{ grid-template-columns:1fr; } .f24l-certificate-step{ padding:24px 19px; } .f24l-document-banner{ align-items:flex-start; flex-direction:column; } .f24l-document-banner a{ width:100%; white-space:normal; } .f24l-table-head{ grid-template-columns:1fr; gap:7px; padding:17px; } .f24l-table-row{ grid-template-columns:1fr; } .f24l-table-row > div{ padding:22px 18px; } .f24l-table-row > div + div{ border-left:0; border-top:1px solid var(--f24l-border); } .f24l-advisory-note{ padding:18px; } .f24l-final-cta{ padding-top:55px; padding-bottom:55px; } .f24l-final-box{ padding:28px 20px; } .f24l-final-actions{ width:100%; flex-direction:column; } .f24l-final-button, .f24l-final-phone{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .f24l-hero h1{ font-size:38px; } .f24l-section-heading h2, .f24l-anchor-content h2, .f24l-certificate-heading h2, .f24l-comparison-header h2{ font-size:31px; } .f24l-rate-card strong{ font-size:44px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS LEASEHOLD VS FREEHOLD PAGE UNIQUE NAMESPACE: gapvLease ROYAL NAVY + GOLD ========================================================= */ /* ========================================================= DESIGN TOKENS ========================================================= */ :root{ --gapvLeaseNavy:#092f62; --gapvLeaseDeep:#061f40; --gapvLeaseBlue:#123f73; --gapvLeaseGold:#c5962f; --gapvLeaseGoldLight:#e1bd68; --gapvLeaseGoldSoft:#f3e7c9; --gapvLeaseWhite:#ffffff; --gapvLeaseIvory:#fcfbf8; --gapvLeaseLight:#f4f7fa; --gapvLeaseText:#43566a; --gapvLeaseMuted:#738296; --gapvLeaseBorder:rgba(9,47,98,.13); } /* ========================================================= BASE ========================================================= */ .gapvLeaseHero, .gapvLeaseLandscape, .gapvLeaseDiscount, .gapvLeaseConversion, .gapvLeaseCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvLeaseHero *, .gapvLeaseLandscape *, .gapvLeaseDiscount *, .gapvLeaseConversion *, .gapvLeaseCTA *{ box-sizing:border-box; } .gapvLeaseHero p, .gapvLeaseLandscape p, .gapvLeaseDiscount p, .gapvLeaseConversion p, .gapvLeaseCTA p{ font-size:16px; line-height:1.8; } .gapvLeaseContainer{ width:min(1220px,100%); margin:auto; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .gapvLeaseHero{ position:relative; overflow:hidden; padding:100px 24px 95px; color:#ffffff; background: radial-gradient( circle at 87% 15%, rgba(225,189,104,.13), transparent 25% ), linear-gradient( 135deg, #061f40 0%, #092f62 58%, #123f73 100% ); } .gapvLeaseHeroGlow{ position:absolute; width:650px; height:650px; right:-390px; bottom:-400px; border:1px solid rgba(225,189,104,.15); border-radius:50%; } .gapvLeaseHeroInner{ position:relative; display:grid; grid-template-columns: minmax(0,1fr) 260px; gap:70px; align-items:center; } .gapvLeaseHeroContent{ max-width:960px; } .gapvLeaseEyebrow{ display:flex; align-items:center; gap:13px; margin-bottom:24px; color:var(--gapvLeaseGoldLight); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvLeaseEyebrow span{ width:46px; height:2px; background:var(--gapvLeaseGoldLight); } .gapvLeaseHero h1{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(52px,6vw,82px); line-height:1; letter-spacing:-2.8px; font-weight:500; } .gapvLeaseHero h1 strong{ display:block; margin-top:8px; color:var(--gapvLeaseGoldLight); font-weight:700; } .gapvLeaseHeroIntro{ max-width:900px; margin:30px 0 0; color:rgba(255,255,255,.76); font-size:18px !important; line-height:1.85 !important; } .gapvLeaseHeroIntro strong{ color:#ffffff; font-weight:800; } .gapvLeaseHeroTags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .gapvLeaseHeroTags span{ padding:9px 13px; border:1px solid rgba(225,189,104,.35); background:rgba(255,255,255,.035); color:rgba(255,255,255,.78); font-size:15px; line-height:1.35; font-weight:700; } .gapvLeaseHeroMarker{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .gapvLeaseMarkerCircle{ width:190px; height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(225,189,104,.55); border-radius:50%; background: radial-gradient( circle, rgba(225,189,104,.11), rgba(255,255,255,.015) ); box-shadow: 0 0 0 10px rgba(255,255,255,.018), 0 0 0 20px rgba(225,189,104,.025); } .gapvLeaseMarkerCircle span{ color:rgba(255,255,255,.55); font-size:15px; font-weight:900; letter-spacing:2px; } .gapvLeaseMarkerCircle strong{ margin-top:5px; color:var(--gapvLeaseGoldLight); font-family: Georgia, "Times New Roman", serif; font-size:30px; } .gapvLeaseHeroMarker p{ max-width:200px; margin:25px 0 0; color:rgba(255,255,255,.62); font-size:15px; line-height:1.55; } .gapvLeaseHeroMarker p strong{ color:#ffffff; } /* ========================================================= SECTION 02 — LANDSCAPE ========================================================= */ .gapvLeaseLandscape{ padding:105px 24px; background:var(--gapvLeaseIvory); } .gapvLeaseSectionHeading{ display:grid; grid-template-columns:70px minmax(0,1fr); gap:20px; align-items:start; margin-bottom:55px; } .gapvLeaseSectionNumber{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(197,150,47,.45); color:var(--gapvLeaseGold); font-family: Georgia, "Times New Roman", serif; font-size:22px; font-weight:700; } .gapvLeaseSectionHeading span{ display:block; margin-bottom:9px; color:var(--gapvLeaseGold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .gapvLeaseSectionHeading h2{ max-width:850px; margin:0; color:var(--gapvLeaseDeep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,56px); line-height:1.12; font-weight:500; } .gapvLeaseSectionHeading h2 strong{ color:var(--gapvLeaseNavy); } .gapvLeaseLandscapeGrid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:70px; align-items:center; } .gapvLeaseLandscapeText{ max-width:760px; } .gapvLeaseLandscapeText p{ margin:0 0 22px; color:var(--gapvLeaseText); } .gapvLeaseLandscapeText strong{ color:var(--gapvLeaseNavy); font-weight:800; } .gapvLeaseAuthorityPanel{ padding:32px; border:1px solid var(--gapvLeaseBorder); background:#ffffff; box-shadow: 0 20px 50px rgba(6,31,64,.07); } .gapvLeaseAuthorityTitle{ padding-bottom:20px; border-bottom:1px solid var(--gapvLeaseBorder); } .gapvLeaseAuthorityTitle span{ display:block; color:var(--gapvLeaseGold); font-size:15px; font-weight:900; letter-spacing:1.6px; } .gapvLeaseAuthorityTitle strong{ display:block; margin-top:5px; color:var(--gapvLeaseDeep); font-family: Georgia, "Times New Roman", serif; font-size:27px; line-height:1.3; } .gapvLeaseAuthorityGrid{ display:grid; grid-template-columns:repeat(2,1fr); } .gapvLeaseAuthorityGrid div{ padding:20px 14px; border-right:1px solid var(--gapvLeaseBorder); border-bottom:1px solid var(--gapvLeaseBorder); } .gapvLeaseAuthorityGrid div:nth-child(even){ border-right:0; } .gapvLeaseAuthorityGrid strong{ display:block; color:var(--gapvLeaseNavy); font-size:17px; line-height:1.4; } .gapvLeaseAuthorityGrid span{ display:block; margin-top:4px; color:var(--gapvLeaseMuted); font-size:15px; line-height:1.45; } /* ========================================================= SECTION 03 — LEASEHOLD DISCOUNT ========================================================= */ .gapvLeaseDiscount{ padding:105px 24px; color:#ffffff; background: radial-gradient( circle at 90% 20%, rgba(225,189,104,.12), transparent 25% ), var(--gapvLeaseDeep); } .gapvLeaseDarkHeading{ display:grid; grid-template-columns:70px minmax(0,1fr); gap:20px; align-items:start; margin-bottom:25px; } .gapvLeaseDarkNumber{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(225,189,104,.5); color:var(--gapvLeaseGoldLight); font-family: Georgia, "Times New Roman", serif; font-size:22px; font-weight:700; } .gapvLeaseDarkHeading span{ display:block; margin-bottom:9px; color:var(--gapvLeaseGoldLight); font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvLeaseDarkHeading h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4vw,57px); line-height:1.1; font-weight:500; } .gapvLeaseDarkHeading h2 strong{ color:var(--gapvLeaseGoldLight); } .gapvLeaseDiscountIntro{ max-width:820px; margin:0 0 45px 90px; } .gapvLeaseDiscountIntro p{ margin:0; color:rgba(255,255,255,.68); } .gapvLeaseDiscountIntro strong{ color:#ffffff; } .gapvLeaseDiscountGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .gapvLeaseDiscountCard{ min-height:610px; display:flex; flex-direction:column; padding:30px; border:1px solid rgba(255,255,255,.12); background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.025) ); transition:.3s ease; } .gapvLeaseDiscountCard:hover{ transform:translateY(-6px); border-color:rgba(225,189,104,.42); } .gapvLeaseCardTop{ display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.10); } .gapvLeaseCardTop span{ color:var(--gapvLeaseGoldLight); font-family: Georgia, "Times New Roman", serif; font-size:44px; line-height:1; } .gapvLeaseCardTop small{ color:rgba(255,255,255,.5); font-size:15px; font-weight:900; letter-spacing:1px; } .gapvLeaseDiscountCard h3{ margin:28px 0 18px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.18; font-weight:500; } .gapvLeaseDiscountCard h3 strong{ color:var(--gapvLeaseGoldLight); } .gapvLeaseDiscountCard > p{ color:rgba(255,255,255,.66); } .gapvLeaseDiscountCard p strong{ color:#ffffff; } .gapvLeaseTermScale{ margin:10px 0 20px; border-top:1px solid rgba(255,255,255,.10); } .gapvLeaseScaleRow{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); } .gapvLeaseScaleRow span{ color:rgba(255,255,255,.65); font-size:15px; } .gapvLeaseScaleRow strong{ color:var(--gapvLeaseGoldLight); font-size:15px; text-align:right; } .gapvLeaseCardNote{ margin-top:auto !important; padding-top:20px; border-top:1px solid rgba(255,255,255,.09); font-size:15px !important; } .gapvLeaseAuthorityExample{ margin:8px 0 20px; } .gapvLeaseAuthorityExample div{ padding:15px; margin-bottom:8px; border-left:2px solid var(--gapvLeaseGold); background:rgba(255,255,255,.04); } .gapvLeaseAuthorityExample strong{ display:block; color:var(--gapvLeaseGoldLight); font-size:16px; } .gapvLeaseAuthorityExample span{ display:block; margin-top:4px; color:rgba(255,255,255,.55); font-size:15px; line-height:1.5; } .gapvGroundRentBox{ margin:10px 0 20px; padding:23px; border:1px solid rgba(225,189,104,.25); background:rgba(225,189,104,.06); } .gapvGroundRentBox span{ display:block; color:var(--gapvLeaseGoldLight); font-size:15px; font-weight:900; letter-spacing:1.2px; } .gapvGroundRentBox strong{ display:block; margin-top:5px; color:#ffffff; font-size:18px; } .gapvGroundRentBox p{ margin:8px 0 0; color:rgba(255,255,255,.58); font-size:15px; line-height:1.6; } /* ========================================================= SECTION 04 — CONVERSION ========================================================= */ .gapvLeaseConversion{ padding:105px 24px; background:#ffffff; } .gapvLeaseConversionGrid{ display:grid; grid-template-columns: 1fr .95fr; gap:75px; align-items:center; } .gapvGoldNumber{ margin-bottom:22px; color:var(--gapvLeaseGold); } .gapvConversionEyebrow{ display:block; margin-bottom:12px; color:var(--gapvLeaseGold); font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvLeaseConversionContent h2{ max-width:680px; margin:0 0 25px; color:var(--gapvLeaseDeep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4vw,57px); line-height:1.1; font-weight:500; } .gapvLeaseConversionContent h2 strong{ color:var(--gapvLeaseNavy); } .gapvLeaseConversionContent p{ max-width:690px; margin:0 0 20px; color:var(--gapvLeaseText); } .gapvLeaseConversionContent p strong{ color:var(--gapvLeaseNavy); font-weight:800; } .gapvLeaseConversionPanel{ overflow:hidden; border:1px solid var(--gapvLeaseBorder); background: linear-gradient( 145deg, #f9fafb, #ffffff ); box-shadow: 0 22px 55px rgba(6,31,64,.09); } .gapvConversionPanelHeader{ padding:27px 28px; color:#ffffff; background: linear-gradient( 135deg, var(--gapvLeaseDeep), var(--gapvLeaseNavy) ); } .gapvConversionPanelHeader span{ display:block; color:var(--gapvLeaseGoldLight); font-size:15px; font-weight:900; letter-spacing:1.6px; } .gapvConversionPanelHeader strong{ display:block; margin-top:6px; font-family: Georgia, "Times New Roman", serif; font-size:26px; line-height:1.3; } .gapvConversionSteps{ padding:8px 28px; } .gapvConversionStep{ display:grid; grid-template-columns:50px minmax(0,1fr); gap:18px; padding:23px 0; border-bottom:1px solid var(--gapvLeaseBorder); } .gapvConversionStep:last-child{ border-bottom:0; } .gapvConversionStep > span{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(197,150,47,.45); color:var(--gapvLeaseGold); font-size:15px; font-weight:900; } .gapvConversionStep strong{ display:block; color:var(--gapvLeaseDeep); font-size:18px; line-height:1.4; } .gapvConversionStep p{ margin:5px 0 0; color:var(--gapvLeaseMuted); font-size:15px; line-height:1.6; } .gapvConversionStep p strong{ display:inline; color:var(--gapvLeaseNavy); font-size:inherit; } .gapvLeaseConversionInsight{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:25px; align-items:start; margin-top:55px; padding:25px 28px; border-left:4px solid var(--gapvLeaseGold); background:var(--gapvLeaseIvory); } .gapvInsightMark{ color:var(--gapvLeaseGold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.3px; } .gapvLeaseConversionInsight p{ margin:0; color:var(--gapvLeaseText); } .gapvLeaseConversionInsight strong{ color:var(--gapvLeaseNavy); } /* ========================================================= SECTION 05 — CTA ========================================================= */ .gapvLeaseCTA{ padding:75px 24px; background: linear-gradient( 135deg, var(--gapvLeaseDeep), var(--gapvLeaseNavy) ); } .gapvLeaseCTAContainer{ width:min(1220px,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:45px; padding:40px; border:1px solid rgba(225,189,104,.3); background: linear-gradient( 120deg, rgba(255,255,255,.055), rgba(255,255,255,.015) ); } .gapvLeaseCTAContent{ max-width:700px; } .gapvLeaseCTAContent > span{ display:block; margin-bottom:9px; color:var(--gapvLeaseGoldLight); font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvLeaseCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(34px,4vw,48px); line-height:1.15; font-weight:500; } .gapvLeaseCTAContent h2 strong{ color:var(--gapvLeaseGoldLight); } .gapvLeaseCTAContent p{ margin:14px 0 0; color:rgba(255,255,255,.62); font-size:16px; } .gapvLeaseCTAActions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gapvLeaseCTAButton{ min-height:59px; display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:14px 23px; border:1px solid var(--gapvLeaseGoldLight); background:var(--gapvLeaseGold); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; box-shadow: 0 12px 30px rgba(0,0,0,.22); transition:.25s ease; } .gapvLeaseCTAButton b{ font-size:21px; } .gapvLeaseCTAButton:hover{ color:#ffffff; background:#d0a13c; transform:translateY(-2px); } .gapvLeasePhoneButton{ min-height:59px; display:flex; align-items:center; gap:11px; padding:9px 17px; border:1px solid rgba(225,189,104,.42); background:rgba(255,255,255,.04); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvLeasePhoneButton:hover{ color:#ffffff; border-color:var(--gapvLeaseGoldLight); background:rgba(255,255,255,.08); } .gapvLeasePhoneIcon{ width:39px; height:39px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvLeaseGoldLight); color:var(--gapvLeaseGoldLight); font-size:18px; } .gapvLeasePhoneButton small{ display:block; color:rgba(255,255,255,.52); font-size:15px; line-height:1.3; } .gapvLeasePhoneButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; } /* ========================================================= TABLET ========================================================= */ @media (max-width:950px){ .gapvLeaseHeroInner{ grid-template-columns:1fr; gap:45px; } .gapvLeaseHeroMarker{ display:none; } .gapvLeaseLandscapeGrid{ grid-template-columns:1fr; gap:45px; } .gapvLeaseDiscountGrid{ grid-template-columns:1fr; } .gapvLeaseDiscountCard{ min-height:auto; } .gapvLeaseConversionGrid{ grid-template-columns:1fr; gap:50px; } .gapvLeaseCTAContainer{ flex-direction:column; align-items:flex-start; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvLeaseHero, .gapvLeaseLandscape, .gapvLeaseDiscount, .gapvLeaseConversion{ padding:70px 17px; } .gapvLeaseCTA{ padding:55px 17px; } .gapvLeaseHero h1{ font-size:43px; letter-spacing:-1.5px; } .gapvLeaseHeroIntro{ font-size:16px !important; } .gapvLeaseHeroTags{ gap:7px; } .gapvLeaseHeroTags span{ font-size:15px; padding:8px 10px; } .gapvLeaseSectionHeading, .gapvLeaseDarkHeading{ grid-template-columns:52px minmax(0,1fr); gap:14px; margin-bottom:38px; } .gapvLeaseSectionNumber, .gapvLeaseDarkNumber{ width:48px; height:48px; font-size:19px; } .gapvLeaseSectionHeading h2, .gapvLeaseDarkHeading h2{ font-size:35px; } .gapvLeaseDiscountIntro{ margin:0 0 35px; } .gapvLeaseAuthorityPanel{ padding:22px 17px; } .gapvLeaseAuthorityGrid{ grid-template-columns:1fr 1fr; } .gapvLeaseDiscountCard{ padding:25px 22px; } .gapvLeaseDiscountCard h3{ font-size:29px; } .gapvLeaseConversionContent h2{ font-size:36px; } .gapvLeaseConversionInsight{ grid-template-columns:1fr; gap:10px; } .gapvLeaseCTAContainer{ padding:27px 20px; } .gapvLeaseCTAContent h2{ font-size:33px; } .gapvLeaseCTAActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvLeaseCTAButton, .gapvLeasePhoneButton{ width:100%; justify-content:center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .gapvLeaseHero h1{ font-size:38px; } .gapvLeaseSectionHeading h2, .gapvLeaseDarkHeading h2{ font-size:31px; } .gapvLeaseAuthorityGrid{ grid-template-columns:1fr; } .gapvLeaseAuthorityGrid div:nth-child(even){ border-right:1px solid var(--gapvLeaseBorder); } .gapvLeaseAuthorityGrid div{ border-right:0 !important; } } /* ========================================================= RERA & PROPERTY VALUATION UNIQUE PREMIUM PAGE CSS ROYAL NAVY + GOLD ========================================================= */ :root{ --reraValNavy:#092f62; --reraValDeep:#061f40; --reraValBlue:#123f73; --reraValGold:#c5962f; --reraValGoldLight:#dfbd68; --reraValGoldSoft:#f3e5c4; --reraValWhite:#ffffff; --reraValIvory:#fcfbf8; --reraValLight:#f4f7fa; --reraValText:#34475b; --reraValMuted:#718096; --reraValBorder:rgba(9,47,98,.13); } /* ========================================================= BASE ========================================================= */ .reraValHero, .reraValComparable, .reraValArea, .reraValMethod, .reraValCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .reraValHero *, .reraValComparable *, .reraValArea *, .reraValMethod *, .reraValCTA *{ box-sizing:border-box; } .reraValHero p, .reraValComparable p, .reraValArea p, .reraValMethod p, .reraValCTA p{ font-size:16px; line-height:1.8; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .reraValHero{ position:relative; overflow:hidden; padding:105px 24px 95px; color:#ffffff; background: radial-gradient( circle at 88% 15%, rgba(223,189,104,.15), transparent 28% ), radial-gradient( circle at 8% 90%, rgba(18,63,115,.7), transparent 30% ), linear-gradient( 135deg, #061f40 0%, #092f62 62%, #123f73 100% ); } .reraValHeroGlow{ position:absolute; border:1px solid rgba(223,189,104,.12); border-radius:50%; pointer-events:none; } .reraValHeroGlowOne{ width:680px; height:680px; right:-360px; top:-330px; } .reraValHeroGlowTwo{ width:440px; height:440px; left:-300px; bottom:-290px; } .reraValHeroContainer{ position:relative; z-index:2; width:min(1200px,100%); margin:auto; } .reraValHeroKicker{ display:flex; align-items:center; gap:14px; margin-bottom:25px; color:var(--reraValGoldLight); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .reraValHeroLine{ width:48px; height:2px; background:var(--reraValGoldLight); } .reraValHero h1{ max-width:1050px; margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(48px,6vw,78px); line-height:1.03; letter-spacing:-2.5px; font-weight:500; } .reraValHero h1 strong{ display:block; margin-top:8px; color:var(--reraValGoldLight); font-weight:700; } .reraValHeroIntro{ max-width:920px; margin-top:32px; } .reraValHeroIntro p{ margin:0 0 18px; color:rgba(255,255,255,.75); font-size:18px; line-height:1.85; } .reraValHeroIntro p strong{ color:#ffffff; font-weight:800; } .reraValHeroHighlights{ display:grid; grid-template-columns: repeat(3,1fr); margin-top:45px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .reraValHeroHighlight{ min-height:125px; display:flex; flex-direction:column; justify-content:center; padding:20px 25px; border-right:1px solid rgba(255,255,255,.11); } .reraValHeroHighlight:last-child{ border-right:0; } .reraValHeroHighlight span{ color:var(--reraValGoldLight); font-family: Georgia, "Times New Roman", serif; font-size:30px; line-height:1; } .reraValHeroHighlight strong{ margin-top:8px; color:#ffffff; font-size:17px; line-height:1.4; } .reraValHeroHighlight small{ margin-top:5px; color:rgba(255,255,255,.57); font-size:15px; line-height:1.5; } /* ========================================================= SHARED SECTION HEADING ========================================================= */ .reraValSectionHeading{ max-width:850px; margin-bottom:55px; } .reraValSectionHeading > span{ display:block; margin-bottom:14px; color:var(--reraValGold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .reraValSectionHeading h2{ margin:0; color:var(--reraValDeep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4.5vw,58px); line-height:1.12; font-weight:500; } .reraValSectionHeading h2 strong{ color:var(--reraValNavy); font-weight:700; } .reraValSectionHeading p{ max-width:750px; margin:20px 0 0; color:var(--reraValMuted); } /* ========================================================= SECTION 02 — RERA COMPARABLES ========================================================= */ .reraValComparable{ padding:105px 24px; background:var(--reraValIvory); } .reraValComparableContainer{ width:min(1200px,100%); margin:auto; } .reraValComparableGrid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:65px; align-items:start; } .reraValComparableContent{ position:relative; padding:35px; border:1px solid var(--reraValBorder); background:#ffffff; box-shadow: 0 20px 55px rgba(6,31,64,.07); } .reraValNumber{ color:var(--reraValGold); font-family: Georgia, "Times New Roman", serif; font-size:70px; line-height:1; } .reraValComparableContent h3{ margin:20px 0; color:var(--reraValDeep); font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.25; font-weight:500; } .reraValComparableContent h3 strong{ color:var(--reraValNavy); } .reraValComparableContent p{ margin:0 0 18px; color:var(--reraValText); } .reraValComparableContent p strong{ color:var(--reraValNavy); font-weight:800; } .reraValEvidenceNote{ margin-top:30px; padding:18px; border-left:4px solid var(--reraValGold); background:#faf5e9; } .reraValEvidenceNote span{ display:block; margin-bottom:6px; color:var(--reraValGold); font-size:15px; font-weight:900; letter-spacing:1px; } .reraValEvidenceNote strong{ color:var(--reraValDeep); font-size:16px; line-height:1.5; } .reraValEvidenceGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; } .reraValEvidenceCard{ min-height:255px; padding:28px; border:1px solid var(--reraValBorder); background:#ffffff; transition: transform .25s ease, box-shadow .25s ease; } .reraValEvidenceCard:hover{ transform:translateY(-5px); box-shadow: 0 18px 40px rgba(6,31,64,.09); } .reraValEvidenceIcon{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; border:1px solid rgba(197,150,47,.55); color:var(--reraValGold); font-size:15px; font-weight:900; } .reraValEvidenceCard h4{ margin:0 0 11px; color:var(--reraValDeep); font-family: Georgia, "Times New Roman", serif; font-size:23px; line-height:1.25; } .reraValEvidenceCard p{ margin:0; color:var(--reraValText); font-size:15px; line-height:1.7; } .reraValEvidenceCard p strong{ color:var(--reraValNavy); } .reraValBottomStatement{ display:flex; align-items:center; gap:20px; margin-top:30px; padding:22px 26px; border:1px solid rgba(197,150,47,.25); background:#fbf7ed; } .reraValBottomStatement span{ flex:0 0 auto; color:var(--reraValGold); font-size:15px; font-weight:900; letter-spacing:1px; } .reraValBottomStatement p{ margin:0; color:var(--reraValDeep); } .reraValBottomStatement p strong{ color:var(--reraValNavy); } /* ========================================================= SECTION 03 — CARPET VS SBA ========================================================= */ .reraValArea{ position:relative; overflow:hidden; padding:105px 24px; background: radial-gradient( circle at 85% 10%, rgba(223,189,104,.13), transparent 25% ), linear-gradient( 135deg, #061f40, #092f62 ); } .reraValAreaContainer{ position:relative; z-index:2; width:min(1200px,100%); margin:auto; } .reraValSectionHeadingLight h2{ color:#ffffff; } .reraValSectionHeadingLight h2 strong{ color:var(--reraValGoldLight); } .reraValSectionHeadingLight p{ color:rgba(255,255,255,.62); } .reraValAreaComparison{ position:relative; display:grid; grid-template-columns: 1fr 90px 1fr; gap:0; align-items:stretch; } .reraValAreaCard{ position:relative; padding:38px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.045); } .reraValAreaCardPrimary{ border-color:rgba(223,189,104,.45); background: linear-gradient( 145deg, rgba(223,189,104,.13), rgba(255,255,255,.035) ); } .reraValAreaBadge{ display:inline-flex; padding:7px 10px; border:1px solid rgba(223,189,104,.4); color:var(--reraValGoldLight); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1px; } .reraValAreaNumber{ margin-top:25px; color:rgba(223,189,104,.45); font-family: Georgia, "Times New Roman", serif; font-size:52px; line-height:1; } .reraValAreaCard h3{ margin:10px 0 17px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:34px; line-height:1.2; font-weight:500; } .reraValAreaCard p{ color:rgba(255,255,255,.68); margin:0 0 20px; } .reraValAreaCard p strong{ color:#ffffff; font-weight:800; } .reraValAreaPoint{ display:flex; align-items:center; gap:10px; margin-top:12px; color:#ffffff; font-size:15px; } .reraValAreaPoint span{ color:var(--reraValGoldLight); font-size:18px; } .reraValAreaVs{ display:flex; align-items:center; justify-content:center; } .reraValAreaVs span{ width:62px; height:62px; display:flex; align-items:center; justify-content:center; border:1px solid var(--reraValGoldLight); border-radius:50%; color:var(--reraValGoldLight); background:var(--reraValDeep); font-size:15px; font-weight:900; } .reraValLoading{ display:flex; align-items:center; gap:15px; margin:22px 0; padding:15px; border-left:3px solid var(--reraValGold); background:rgba(255,255,255,.05); } .reraValLoading strong{ color:var(--reraValGoldLight); font-family: Georgia, "Times New Roman", serif; font-size:29px; } .reraValLoading span{ color:rgba(255,255,255,.58); font-size:15px; line-height:1.45; } .reraValAreaWarning{ padding-top:15px; border-top:1px solid rgba(255,255,255,.1); } /* ========================================================= NORMALISATION ========================================================= */ .reraValNormalisation{ display:flex; align-items:center; gap:20px; margin-top:25px; padding:27px 30px; border:1px solid rgba(223,189,104,.3); background:rgba(255,255,255,.045); } .reraValNormalisationIcon{ width:58px; height:58px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:1px solid var(--reraValGoldLight); color:var(--reraValGoldLight); font-family: Georgia, "Times New Roman", serif; font-size:27px; } .reraValNormalisation span{ display:block; margin-bottom:5px; color:var(--reraValGoldLight); font-size:15px; font-weight:900; letter-spacing:1px; } .reraValNormalisation h3{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:24px; line-height:1.4; font-weight:500; } .reraValNormalisation h3 strong{ color:var(--reraValGoldLight); } /* ========================================================= SECTION 04 — METHODOLOGY ========================================================= */ .reraValMethod{ padding:105px 24px; background:var(--reraValIvory); } .reraValMethodContainer{ width:min(1200px,100%); margin:auto; } .reraValMethodGrid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:70px; } .reraValMethodIntro > span{ display:block; margin-bottom:14px; color:var(--reraValGold); font-size:15px; font-weight:900; letter-spacing:1.8px; } .reraValMethodIntro h2{ margin:0; color:var(--reraValDeep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,52px); line-height:1.15; font-weight:500; } .reraValMethodIntro h2 strong{ color:var(--reraValNavy); } .reraValMethodIntro p{ margin:22px 0 30px; color:var(--reraValText); } .reraValMethodButton{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:14px 22px; background:var(--reraValGold); border:1px solid var(--reraValGold); color:#ffffff; text-decoration:none; font-size:15px; font-weight:900; box-shadow: 0 12px 25px rgba(197,150,47,.2); transition:.25s ease; } .reraValMethodButton b{ font-size:20px; } .reraValMethodButton:hover{ color:#ffffff; background:#d1a33e; transform:translateY(-2px); } .reraValMethodSteps{ border-top:1px solid var(--reraValBorder); } .reraValMethodStep{ display:grid; grid-template-columns:65px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--reraValBorder); } .reraValMethodStep > span{ color:var(--reraValGold); font-family: Georgia, "Times New Roman", serif; font-size:28px; line-height:1; } .reraValMethodStep strong{ display:block; color:var(--reraValDeep); font-size:18px; line-height:1.4; } .reraValMethodStep p{ margin:7px 0 0; color:var(--reraValMuted); font-size:15px; line-height:1.7; } .reraValMethodStep p strong{ display:inline; color:var(--reraValNavy); font-size:inherit; } /* ========================================================= SECTION 05 — CTA ========================================================= */ .reraValCTA{ padding:75px 24px; background:var(--reraValDeep); } .reraValCTAContainer{ width:min(1200px,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:45px; padding:42px; border:1px solid rgba(223,189,104,.35); background: linear-gradient( 110deg, rgba(255,255,255,.06), rgba(255,255,255,.02) ); } .reraValCTAContent{ max-width:700px; } .reraValCTAContent > span{ display:block; margin-bottom:9px; color:var(--reraValGoldLight); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.7px; } .reraValCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(32px,4vw,48px); line-height:1.15; font-weight:500; } .reraValCTAContent h2 strong{ color:var(--reraValGoldLight); } .reraValCTAContent p{ margin:15px 0 0; color:rgba(255,255,255,.62); } .reraValCTAActions{ display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:275px; } .reraValCTAButton{ min-height:58px; display:flex; align-items:center; justify-content:center; gap:15px; padding:14px 22px; background:var(--reraValGold); border:1px solid var(--reraValGoldLight); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition:.25s ease; } .reraValCTAButton b{ font-size:21px; } .reraValCTAButton:hover{ color:#ffffff; background:#d1a33e; transform:translateY(-2px); } .reraValPhoneButton{ min-height:62px; display:flex; align-items:center; justify-content:center; gap:12px; padding:9px 15px; border:1px solid rgba(223,189,104,.42); background:rgba(255,255,255,.04); color:#ffffff; text-decoration:none; transition:.25s ease; } .reraValPhoneButton:hover{ color:#ffffff; border-color:var(--reraValGoldLight); background:rgba(255,255,255,.08); } .reraValPhoneIcon{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--reraValGoldLight); color:var(--reraValGoldLight); font-size:18px; } .reraValPhoneButton small{ display:block; color:rgba(255,255,255,.55); font-size:15px; line-height:1.3; } .reraValPhoneButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.35; } /* ========================================================= TABLET ========================================================= */ @media (max-width:950px){ .reraValComparableGrid, .reraValMethodGrid{ grid-template-columns:1fr; gap:40px; } .reraValAreaComparison{ grid-template-columns:1fr; gap:15px; } .reraValAreaVs{ min-height:60px; } .reraValCTAContainer{ flex-direction:column; align-items:flex-start; } .reraValCTAActions{ width:100%; max-width:420px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .reraValHero, .reraValComparable, .reraValArea, .reraValMethod, .reraValCTA{ padding-left:17px; padding-right:17px; } .reraValHero{ padding-top:70px; padding-bottom:70px; } .reraValHero h1{ font-size:42px; letter-spacing:-1.4px; } .reraValHeroIntro p{ font-size:16px; } .reraValHeroHighlights{ grid-template-columns:1fr; } .reraValHeroHighlight{ min-height:auto; padding:20px; border-right:0; border-bottom:1px solid rgba(255,255,255,.11); } .reraValHeroHighlight:last-child{ border-bottom:0; } .reraValSectionHeading h2, .reraValMethodIntro h2{ font-size:35px; } .reraValComparable{ padding-top:75px; padding-bottom:75px; } .reraValComparableContent{ padding:27px 22px; } .reraValComparableContent h3{ font-size:28px; } .reraValEvidenceGrid{ grid-template-columns:1fr; } .reraValEvidenceCard{ min-height:auto; padding:25px 22px; } .reraValBottomStatement{ align-items:flex-start; flex-direction:column; gap:7px; padding:20px; } .reraValArea{ padding-top:75px; padding-bottom:75px; } .reraValAreaCard{ padding:27px 22px; } .reraValAreaCard h3{ font-size:30px; } .reraValNormalisation{ align-items:flex-start; padding:22px; } .reraValNormalisation h3{ font-size:20px; } .reraValMethod{ padding-top:75px; padding-bottom:75px; } .reraValMethodStep{ grid-template-columns:48px 1fr; gap:13px; } .reraValCTA{ padding-top:55px; padding-bottom:55px; } .reraValCTAContainer{ padding:27px 20px; } .reraValCTAContent h2{ font-size:32px; } .reraValCTAActions{ max-width:none; } .reraValCTAButton, .reraValPhoneButton, .reraValMethodButton{ width:100%; } } /* ========================================================= VERY SMALL DEVICES ========================================================= */ @media (max-width:390px){ .reraValHero h1{ font-size:37px; } .reraValSectionHeading h2, .reraValMethodIntro h2{ font-size:31px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS STATUTORY CONTEXT PAGE UNIQUE NAMESPACE: gapvstat- ROYAL NAVY + GOLD ========================================================= */ :root{ --gapvstat-navy:#092f62; --gapvstat-deep:#061f40; --gapvstat-navy2:#123f73; --gapvstat-gold:#c5962f; --gapvstat-gold2:#dfbd6b; --gapvstat-gold3:#f1dfb8; --gapvstat-white:#ffffff; --gapvstat-ivory:#fcfbf7; --gapvstat-light:#f3f6f9; --gapvstat-text:#415366; --gapvstat-muted:#718094; --gapvstat-border:rgba(9,47,98,.13); } /* ========================================================= BASE ========================================================= */ .gapvstatHero *, .gapvstatIndex *, .gapvstatSection *, .gapvstatPurpose *, .gapvstatCTA *{ box-sizing:border-box; } .gapvstatHero, .gapvstatIndex, .gapvstatSection, .gapvstatPurpose, .gapvstatCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvstatHero p, .gapvstatSection p, .gapvstatPurpose p, .gapvstatCTA p{ font-size:16px; line-height:1.8; } .gapvstatContainer{ width:min(1240px,100%); margin:0 auto; padding-left:22px; padding-right:22px; } /* ========================================================= HERO ========================================================= */ .gapvstatHero{ position:relative; overflow:hidden; padding:95px 0 85px; color:#ffffff; background: radial-gradient( circle at 85% 15%, rgba(223,189,107,.15), transparent 26% ), linear-gradient( 135deg, #061f40 0%, #092f62 60%, #123f73 100% ); } .gapvstatHeroOrb{ position:absolute; border:1px solid rgba(223,189,107,.13); border-radius:50%; pointer-events:none; } .gapvstatHeroOrbOne{ width:620px; height:620px; right:-330px; top:-300px; } .gapvstatHeroOrbTwo{ width:350px; height:350px; left:-260px; bottom:-240px; } .gapvstatHeroInner{ position:relative; z-index:2; max-width:1080px; margin:0 auto; text-align:center; } .gapvstatHeroKicker{ display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:22px; color:var(--gapvstat-gold2); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2.2px; } .gapvstatHeroKicker span{ width:42px; height:2px; background:var(--gapvstat-gold2); } .gapvstatHero h1{ max-width:1050px; margin:0 auto; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(46px,6vw,76px); line-height:1.04; letter-spacing:-2px; font-weight:500; } .gapvstatHero h1 strong{ display:block; margin-top:7px; color:var(--gapvstat-gold2); font-weight:700; } .gapvstatHeroIntro{ max-width:850px; margin:30px auto 0; color:rgba(255,255,255,.76); font-size:18px !important; line-height:1.8 !important; } .gapvstatHeroIntro strong{ color:#ffffff; font-weight:800; } .gapvstatHeroTags{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:9px; margin-top:32px; } .gapvstatHeroTags span{ padding:10px 14px; border:1px solid rgba(223,189,107,.38); background:rgba(255,255,255,.045); color:rgba(255,255,255,.85); font-size:15px; line-height:1.3; font-weight:800; } /* ========================================================= STATUTORY INDEX ========================================================= */ .gapvstatIndex{ position:relative; z-index:5; margin-top:-1px; background:#ffffff; border-bottom:1px solid var(--gapvstat-border); box-shadow:0 10px 30px rgba(6,31,64,.055); } .gapvstatIndexInner{ display:grid; grid-template-columns: repeat(5,1fr); } .gapvstatIndex a{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:70px; padding:13px 12px; border-right:1px solid var(--gapvstat-border); color:var(--gapvstat-navy); text-decoration:none; font-size:15px; line-height:1.4; font-weight:800; text-align:center; transition:.25s ease; } .gapvstatIndex a:last-child{ border-right:0; } .gapvstatIndex a:hover{ background:var(--gapvstat-light); color:var(--gapvstat-gold); } .gapvstatIndex a span{ color:var(--gapvstat-gold); font-family: Georgia, "Times New Roman", serif; font-size:18px; } /* ========================================================= COMMON SECTION ========================================================= */ .gapvstatSection{ padding:105px 0; } .gapvstatIncome{ background:var(--gapvstat-ivory); } .gapvstatBanking{ background:#ffffff; } .gapvstatIBC{ background:var(--gapvstat-light); } .gapvstatLARR{ background:#ffffff; } .gapvstatRent{ background:var(--gapvstat-ivory); } .gapvstatEyebrow{ display:block; margin-bottom:13px; color:var(--gapvstat-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.9px; } /* ========================================================= SECTION HEADINGS ========================================================= */ .gapvstatSectionHeading{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:25px; align-items:start; margin-bottom:50px; } .gapvstatSectionNumber{ display:flex; align-items:center; justify-content:center; width:76px; height:76px; border:1px solid rgba(197,150,47,.45); color:var(--gapvstat-gold); font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1; } .gapvstatSectionHeading h2, .gapvstatSplitHeading h2, .gapvstatIBCHeader h2, .gapvstatLARRContent h2, .gapvstatRentIntro h2{ max-width:850px; margin:0; color:var(--gapvstat-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(36px,4vw,53px); line-height:1.13; font-weight:500; } .gapvstatSectionHeading h2 strong, .gapvstatSplitHeading h2 strong, .gapvstatIBCHeader h2 strong, .gapvstatLARRContent h2 strong, .gapvstatRentIntro h2 strong{ color:var(--gapvstat-navy); font-weight:700; } .gapvstatSectionHeading p{ max-width:850px; margin:19px 0 0; color:var(--gapvstat-muted); } /* ========================================================= INCOME TAX CARDS ========================================================= */ .gapvstatTaxGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .gapvstatTaxCard{ position:relative; display:flex; flex-direction:column; min-height:410px; padding:29px 27px 25px; border:1px solid var(--gapvstat-border); background:#ffffff; box-shadow: 0 15px 40px rgba(6,31,64,.055); transition: transform .28s ease, box-shadow .28s ease; } .gapvstatTaxCard:hover{ transform:translateY(-5px); box-shadow: 0 22px 50px rgba(6,31,64,.11); } .gapvstatTaxCard:before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--gapvstat-navy); } .gapvstatFeatured:before, .gapvstatGoldCard:before{ background:var(--gapvstat-gold); } .gapvstatCardTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .gapvstatLawNumber{ color:var(--gapvstat-gold); font-family: Georgia, "Times New Roman", serif; font-size:28px; line-height:1.15; font-weight:700; } .gapvstatCardTag{ padding:7px 8px; border:1px solid rgba(9,47,98,.12); color:var(--gapvstat-navy); font-size:15px; line-height:1.3; font-weight:900; text-align:right; } .gapvstatTaxCard h3{ margin:28px 0 17px; color:var(--gapvstat-deep); font-family: Georgia, "Times New Roman", serif; font-size:27px; line-height:1.25; font-weight:500; } .gapvstatTaxCard h3 strong{ color:var(--gapvstat-navy); font-weight:700; } .gapvstatTaxCard p{ margin:0; color:var(--gapvstat-text); font-size:15.5px; } .gapvstatTaxCard p strong{ color:var(--gapvstat-navy); font-weight:800; } .gapvstatCardFooter{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:20px; border-top:1px solid var(--gapvstat-border); } .gapvstatCardFooter strong{ color:var(--gapvstat-gold); font-size:15px; line-height:1.3; font-weight:900; } .gapvstatCardFooter span{ color:var(--gapvstat-muted); font-size:15px; } .gapvstatDarkCard{ color:#ffffff; border-color:rgba(223,189,107,.20); background: linear-gradient( 145deg, #061f40, #092f62 ); } .gapvstatDarkCard h3{ color:#ffffff; } .gapvstatDarkCard h3 strong{ color:var(--gapvstat-gold2); } .gapvstatDarkCard p{ color:rgba(255,255,255,.68); } .gapvstatDarkCard p strong{ color:#ffffff; } .gapvstatDarkCard .gapvstatCardTag{ color:var(--gapvstat-gold2); border-color:rgba(223,189,107,.25); } .gapvstatDarkCard .gapvstatCardFooter{ border-color:rgba(255,255,255,.12); } .gapvstatDarkCard .gapvstatCardFooter span{ color:rgba(255,255,255,.58); } /* ========================================================= BANKING SECTION ========================================================= */ .gapvstatSplitHeading{ display:grid; grid-template-columns: 1.15fr .85fr; gap:70px; align-items:end; margin-bottom:55px; } .gapvstatSplitHeading > p{ margin:0; color:var(--gapvstat-muted); } .gapvstatBankGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; } .gapvstatBankCard{ display:grid; grid-template-columns:54px minmax(0,1fr); gap:20px; min-height:315px; padding:30px 27px; border:1px solid var(--gapvstat-border); background:var(--gapvstat-ivory); } .gapvstatBankNumber{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(197,150,47,.42); color:var(--gapvstat-gold); font-family: Georgia, "Times New Roman", serif; font-size:20px; } .gapvstatBankLabel{ display:block; margin-bottom:11px; color:var(--gapvstat-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.2px; } .gapvstatBankCard h3{ margin:0 0 17px; color:var(--gapvstat-deep); font-family: Georgia, "Times New Roman", serif; font-size:27px; line-height:1.25; font-weight:500; } .gapvstatBankCard h3 strong{ color:var(--gapvstat-navy); font-weight:700; } .gapvstatBankCard p{ margin:0; color:var(--gapvstat-text); } .gapvstatBankCard p strong{ color:var(--gapvstat-navy); font-weight:800; } /* ========================================================= IBC SECTION ========================================================= */ .gapvstatIBCHeader{ max-width:850px; margin-bottom:50px; } .gapvstatIBCGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; } .gapvstatIBCCard{ position:relative; min-height:405px; padding:34px; border:1px solid rgba(9,47,98,.12); background:#ffffff; box-shadow: 0 18px 45px rgba(6,31,64,.065); } .gapvstatIBCCardGold{ border-color:rgba(197,150,47,.27); background: linear-gradient( 145deg, #ffffff, #fcf8ee ); } .gapvstatIBCTop{ display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--gapvstat-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1px; } .gapvstatIBCBadge{ display:inline-flex; align-items:center; justify-content:center; min-width:58px; min-height:45px; padding:7px 10px; border:1px solid rgba(197,150,47,.45); color:var(--gapvstat-gold); } .gapvstatIBCCard h3{ margin:28px 0 18px; color:var(--gapvstat-deep); font-family: Georgia, "Times New Roman", serif; font-size:32px; line-height:1.2; font-weight:500; } .gapvstatIBCCard h3 strong{ color:var(--gapvstat-navy); font-weight:700; } .gapvstatIBCCard p{ color:var(--gapvstat-text); } .gapvstatIBCCard p strong{ color:var(--gapvstat-navy); } .gapvstatPropertyTags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; } .gapvstatPropertyTags span{ padding:8px 10px; border:1px solid rgba(9,47,98,.11); color:var(--gapvstat-navy); background:#f7f9fb; font-size:15px; font-weight:800; } .gapvstatIBCMetric{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:25px; padding-top:20px; border-top:1px solid var(--gapvstat-border); } .gapvstatIBCMetric strong{ color:var(--gapvstat-gold); font-size:22px; } .gapvstatIBCMetric span{ color:var(--gapvstat-muted); font-size:15px; } .gapvstatIBCMetric i{ color:var(--gapvstat-navy); font-style:normal; font-weight:900; } .gapvstatCorporateLine{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:35px; padding-top:20px; border-top:1px solid var(--gapvstat-border); color:var(--gapvstat-gold); font-size:15px; font-weight:900; } /* ========================================================= LARR SECTION ========================================================= */ .gapvstatLARRBox{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:45px; align-items:center; padding:55px; border:1px solid rgba(197,150,47,.25); background: linear-gradient( 135deg, #061f40, #092f62 ); box-shadow: 0 25px 60px rgba(6,31,64,.14); } .gapvstatLARRNumber{ display:flex; align-items:center; justify-content:center; width:125px; height:125px; border:1px solid rgba(223,189,107,.55); border-radius:50%; color:var(--gapvstat-gold2); font-family: Georgia, "Times New Roman", serif; font-size:48px; font-weight:700; } .gapvstatLARRContent h2{ color:#ffffff; } .gapvstatLARRContent h2 strong{ color:var(--gapvstat-gold2); } .gapvstatLARRContent p{ max-width:850px; color:rgba(255,255,255,.67); } .gapvstatLARRContent p strong{ color:#ffffff; } .gapvstatLARRPoints{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:30px; } .gapvstatLARRPoints div{ padding:16px; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.035); } .gapvstatLARRPoints strong{ display:block; color:var(--gapvstat-gold2); font-size:18px; } .gapvstatLARRPoints span{ display:block; margin-top:4px; color:rgba(255,255,255,.58); font-size:15px; } /* ========================================================= RENT SECTION ========================================================= */ .gapvstatRentInner{ display:grid; grid-template-columns: .85fr 1.15fr; gap:60px; align-items:center; } .gapvstatRentIntro p{ max-width:580px; color:var(--gapvstat-muted); } .gapvstatRentCard{ display:grid; grid-template-columns:85px minmax(0,1fr); gap:25px; align-items:start; padding:35px; border:1px solid rgba(197,150,47,.30); background:#ffffff; box-shadow: 0 20px 50px rgba(6,31,64,.075); } .gapvstatRentIcon{ width:75px; height:75px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvstat-gold); color:var(--gapvstat-gold); font-family: Georgia, "Times New Roman", serif; font-size:25px; font-weight:700; } .gapvstatRentCard > div:last-child > span{ display:block; color:var(--gapvstat-gold); font-size:15px; font-weight:900; letter-spacing:1.3px; } .gapvstatRentCard h3{ margin:10px 0 15px; color:var(--gapvstat-deep); font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.2; font-weight:500; } .gapvstatRentCard h3 strong{ color:var(--gapvstat-navy); } .gapvstatRentCard p{ margin:0; color:var(--gapvstat-text); } .gapvstatRentCard p strong{ color:var(--gapvstat-navy); } /* ========================================================= PURPOSE MAP ========================================================= */ .gapvstatPurpose{ padding:100px 0; background:#ffffff; } .gapvstatPurposeHeader{ max-width:850px; margin:0 auto 45px; text-align:center; } .gapvstatPurposeHeader h2{ margin:0; color:var(--gapvstat-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(36px,4vw,52px); line-height:1.15; font-weight:500; } .gapvstatPurposeHeader h2 strong{ color:var(--gapvstat-navy); } .gapvstatPurposeHeader p{ margin:18px auto 0; color:var(--gapvstat-muted); } .gapvstatPurposeGrid{ display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--gapvstat-border); border-left:1px solid var(--gapvstat-border); } .gapvstatPurposeItem{ min-height:135px; display:flex; flex-direction:column; justify-content:center; padding:20px; border-right:1px solid var(--gapvstat-border); border-bottom:1px solid var(--gapvstat-border); transition:.25s ease; } .gapvstatPurposeItem:hover{ background:var(--gapvstat-ivory); } .gapvstatPurposeItem strong{ color:var(--gapvstat-gold); font-family: Georgia, "Times New Roman", serif; font-size:25px; line-height:1.2; } .gapvstatPurposeItem span{ margin-top:7px; color:var(--gapvstat-navy); font-size:15px; line-height:1.5; font-weight:800; } /* ========================================================= FINAL CTA ========================================================= */ .gapvstatCTA{ padding:0 0 95px; background:#ffffff; } .gapvstatCTAWrap{ display:flex; align-items:center; justify-content:space-between; gap:45px; padding:43px 45px; border:1px solid rgba(223,189,107,.40); background: radial-gradient( circle at 90% 20%, rgba(223,189,107,.13), transparent 28% ), linear-gradient( 135deg, #061f40, #092f62 ); box-shadow: 0 25px 60px rgba(6,31,64,.15); } .gapvstatCTAContent{ max-width:730px; } .gapvstatCTAContent > span{ display:block; margin-bottom:9px; color:var(--gapvstat-gold2); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.7px; } .gapvstatCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:38px; line-height:1.18; font-weight:500; } .gapvstatCTAContent h2 strong{ color:var(--gapvstat-gold2); } .gapvstatCTAContent p{ margin:13px 0 0; color:rgba(255,255,255,.64); } .gapvstatCTAContent p strong{ color:#ffffff; } .gapvstatCTAActions{ display:flex; flex-direction:column; gap:12px; min-width:260px; } .gapvstatCTAButton{ min-height:59px; display:flex; align-items:center; justify-content:center; gap:15px; padding:14px 22px; border:1px solid var(--gapvstat-gold2); background:var(--gapvstat-gold); color:#ffffff; text-decoration:none; font-size:16px; line-height:1.3; font-weight:900; box-shadow: 0 12px 28px rgba(0,0,0,.22); transition:.25s ease; } .gapvstatCTAButton b{ font-size:22px; } .gapvstatCTAButton:hover{ color:#ffffff; background:#d2a13a; transform:translateY(-2px); } .gapvstatPhoneButton{ min-height:59px; display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 16px; border:1px solid rgba(223,189,107,.42); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvstatPhoneButton:hover{ color:#ffffff; background:rgba(255,255,255,.09); border-color:var(--gapvstat-gold2); } .gapvstatPhoneIcon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvstat-gold2); color:var(--gapvstat-gold2); font-size:18px; } .gapvstatPhoneButton small{ display:block; color:rgba(255,255,255,.53); font-size:15px; line-height:1.3; } .gapvstatPhoneButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1050px){ .gapvstatTaxGrid{ grid-template-columns: repeat(2,1fr); } .gapvstatBankGrid{ grid-template-columns:1fr; } .gapvstatBankCard{ min-height:auto; } .gapvstatSplitHeading{ grid-template-columns:1fr; gap:20px; } .gapvstatPurposeGrid{ grid-template-columns: repeat(2,1fr); } .gapvstatRentInner{ grid-template-columns:1fr; gap:35px; } } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width:850px){ .gapvstatHero{ padding:75px 0 70px; } .gapvstatHero h1{ font-size:52px; } .gapvstatIndexInner{ grid-template-columns: repeat(3,1fr); } .gapvstatIndex a{ border-bottom:1px solid var(--gapvstat-border); } .gapvstatIBCGrid{ grid-template-columns:1fr; } .gapvstatLARRBox{ grid-template-columns:100px minmax(0,1fr); padding:40px 30px; gap:30px; } .gapvstatLARRPoints{ grid-template-columns:1fr; } .gapvstatCTAWrap{ align-items:flex-start; flex-direction:column; } .gapvstatCTAActions{ width:100%; flex-direction:row; } .gapvstatCTAButton, .gapvstatPhoneButton{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvstatContainer{ padding-left:17px; padding-right:17px; } .gapvstatHero{ padding:60px 0 55px; } .gapvstatHeroKicker{ font-size:15px; letter-spacing:1.2px; } .gapvstatHero h1{ font-size:40px; line-height:1.04; letter-spacing:-1px; } .gapvstatHeroIntro{ font-size:16px !important; line-height:1.75 !important; } .gapvstatHeroTags{ justify-content:flex-start; } .gapvstatHeroTags span{ font-size:15px; } /* INDEX */ .gapvstatIndexInner{ grid-template-columns: repeat(2,1fr); } .gapvstatIndex a{ min-height:65px; padding:10px 8px; font-size:15px; } /* SECTIONS */ .gapvstatSection{ padding:72px 0; } .gapvstatSectionHeading{ grid-template-columns:1fr; gap:20px; margin-bottom:38px; } .gapvstatSectionNumber{ width:62px; height:62px; font-size:25px; } .gapvstatSectionHeading h2, .gapvstatSplitHeading h2, .gapvstatIBCHeader h2, .gapvstatLARRContent h2, .gapvstatRentIntro h2{ font-size:35px; } /* TAX */ .gapvstatTaxGrid{ grid-template-columns:1fr; } .gapvstatTaxCard{ min-height:auto; padding:27px 23px; } .gapvstatTaxCard h3{ font-size:27px; } /* BANKING */ .gapvstatBankCard{ grid-template-columns:1fr; padding:27px 22px; } .gapvstatBankNumber{ width:45px; height:45px; } /* IBC */ .gapvstatIBCCard{ min-height:auto; padding:28px 23px; } .gapvstatIBCCard h3{ font-size:28px; } /* LARR */ .gapvstatLARRBox{ grid-template-columns:1fr; padding:32px 22px; } .gapvstatLARRNumber{ width:90px; height:90px; font-size:35px; } /* RENT */ .gapvstatRentCard{ grid-template-columns:1fr; padding:27px 22px; } .gapvstatRentIcon{ width:62px; height:62px; } .gapvstatRentCard h3{ font-size:28px; } /* PURPOSE */ .gapvstatPurpose{ padding:72px 0; } .gapvstatPurposeHeader h2{ font-size:35px; } .gapvstatPurposeGrid{ grid-template-columns: repeat(2,1fr); } .gapvstatPurposeItem{ min-height:115px; padding:16px; } /* CTA */ .gapvstatCTA{ padding-bottom:70px; } .gapvstatCTAWrap{ padding:30px 22px; } .gapvstatCTAContent h2{ font-size:31px; } .gapvstatCTAActions{ flex-direction:column; } .gapvstatCTAButton, .gapvstatPhoneButton{ width:100%; flex:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .gapvstatHero h1{ font-size:36px; } .gapvstatSectionHeading h2, .gapvstatSplitHeading h2, .gapvstatIBCHeader h2, .gapvstatLARRContent h2, .gapvstatRentIntro h2, .gapvstatPurposeHeader h2{ font-size:31px; } .gapvstatIndex a{ font-size:15px; } .gapvstatPurposeGrid{ grid-template-columns:1fr; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS CERTIFICATE TAXONOMY UNIQUE NAMESPACE: gapvct- ========================================================= */ :root{ --gapvct-navy:#092f62; --gapvct-deep:#061f40; --gapvct-blue:#123f73; --gapvct-gold:#c5962f; --gapvct-gold-light:#e0bd69; --gapvct-gold-pale:#f4e8c9; --gapvct-white:#ffffff; --gapvct-ivory:#fcfaf5; --gapvct-soft:#f5f7fa; --gapvct-text:#41546a; --gapvct-muted:#728196; --gapvct-border:rgba(9,47,98,.13); } /* ========================================================= GLOBAL ========================================================= */ .gapvct-intro *, .gapvct-certificates *, .gapvct-selection *{ box-sizing:border-box; } .gapvct-intro, .gapvct-certificates, .gapvct-selection{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvct-intro p, .gapvct-certificates p, .gapvct-selection p{ font-size:16px; line-height:1.8; } /* ========================================================= COMMON CONTAINER ========================================================= */ .gapvct-container{ width:min(1240px,100%); margin:0 auto; } /* ========================================================= INTRO ========================================================= */ .gapvct-intro{ position:relative; overflow:hidden; padding:95px 24px 78px; background: linear-gradient( 135deg, #061f40 0%, #092f62 60%, #123f73 100% ); color:#ffffff; } .gapvct-intro:after{ content:""; position:absolute; width:500px; height:500px; right:-280px; top:-280px; border:1px solid rgba(224,189,105,.16); border-radius:50%; } .gapvct-intro-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.05fr .95fr; gap:80px; align-items:end; } .gapvct-eyebrow{ display:flex; align-items:center; gap:13px; margin-bottom:20px; color:var(--gapvct-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvct-eyebrow:before{ content:""; width:45px; height:2px; background:var(--gapvct-gold-light); } .gapvct-intro-heading h1{ margin:0; max-width:750px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(45px,5vw,70px); line-height:1.05; letter-spacing:-2px; font-weight:500; } .gapvct-intro-heading h1 strong{ color:var(--gapvct-gold-light); font-weight:700; } .gapvct-intro-copy{ padding-left:30px; border-left:1px solid rgba(224,189,105,.38); } .gapvct-intro-copy p{ margin:0 0 19px; color:rgba(255,255,255,.72); } .gapvct-intro-copy p:last-child{ margin-bottom:0; } .gapvct-intro-copy strong{ color:#ffffff; font-weight:800; } /* ========================================================= CERTIFICATE SECTION ========================================================= */ .gapvct-certificates{ padding:95px 24px; background:var(--gapvct-ivory); } /* ========================================================= CERTIFICATE GRID ========================================================= */ .gapvct-certificates .gapvct-container{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; } /* ========================================================= CARD BASE ========================================================= */ .gapvct-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:680px; padding:34px 32px 29px; border:1px solid var(--gapvct-border); background:#ffffff; box-shadow: 0 18px 50px rgba(6,31,64,.055); transition: transform .3s ease, box-shadow .3s ease; } .gapvct-card:hover{ transform:translateY(-6px); box-shadow: 0 28px 65px rgba(6,31,64,.12); } .gapvct-card:before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--gapvct-navy); } .gapvct-card-featured:before{ background:var(--gapvct-gold); } .gapvct-card-gold{ background: linear-gradient( 145deg, #ffffff, #fbf7ed ); border-color:rgba(197,150,47,.30); } .gapvct-card-gold:before{ background:var(--gapvct-gold); } /* ========================================================= DARK CARD ========================================================= */ .gapvct-card-dark{ color:#ffffff; border-color:rgba(224,189,105,.25); background: linear-gradient( 145deg, #061f40, #092f62 ); } .gapvct-card-dark:before{ background:var(--gapvct-gold-light); } .gapvct-card-dark .gapvct-authority, .gapvct-card-dark .gapvct-code{ border-color:rgba(224,189,105,.38); color:var(--gapvct-gold-light); } .gapvct-card-dark h2{ color:#ffffff; } .gapvct-card-dark h2 strong{ color:var(--gapvct-gold-light); } .gapvct-card-dark .gapvct-purpose{ color:rgba(255,255,255,.62); } .gapvct-card-dark > p{ color:rgba(255,255,255,.70); } .gapvct-card-dark .gapvct-details{ border-color:rgba(255,255,255,.11); } .gapvct-card-dark .gapvct-details h3{ color:var(--gapvct-gold-light); } .gapvct-card-dark .gapvct-details li{ color:rgba(255,255,255,.68); } .gapvct-card-dark .gapvct-details li strong{ color:#ffffff; } .gapvct-card-dark .gapvct-card-footer{ border-color:rgba(255,255,255,.12); } .gapvct-card-dark .gapvct-card-footer span{ color:rgba(255,255,255,.65); } .gapvct-card-dark .gapvct-card-footer strong{ color:#ffffff; } /* ========================================================= CARD NUMBER ========================================================= */ .gapvct-card-number{ position:absolute; top:18px; right:25px; color:rgba(9,47,98,.075); font-family: Georgia, "Times New Roman", serif; font-size:75px; line-height:1; font-weight:700; } .gapvct-card-dark .gapvct-card-number{ color:rgba(255,255,255,.07); } /* ========================================================= CARD TOP ========================================================= */ .gapvct-card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:30px; } .gapvct-authority, .gapvct-code{ display:inline-flex; align-items:center; min-height:31px; padding:6px 9px; border:1px solid rgba(9,47,98,.14); color:var(--gapvct-navy); font-size:15px; line-height:1.3; font-weight:900; letter-spacing:1px; } .gapvct-code{ color:var(--gapvct-gold); border-color:rgba(197,150,47,.30); } /* ========================================================= CARD HEADING ========================================================= */ .gapvct-card-heading{ display:flex; align-items:flex-start; gap:17px; margin-bottom:22px; } .gapvct-icon{ flex:0 0 auto; width:58px; height:58px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(197,150,47,.45); color:var(--gapvct-gold); font-size:15px; line-height:1.2; font-weight:900; } .gapvct-card-heading h2{ margin:0; color: #c8a861; font-family: Georgia, "Times New Roman", serif; font-size:29px; line-height:1.2; font-weight:500; } .gapvct-card-heading h2 strong{ color:var(--gapvct-navy); font-weight:700; } .gapvct-purpose{ display:block; margin-top:7px; color:var(--gapvct-muted); font-size:15px; line-height:1.4; font-weight:700; } /* ========================================================= CARD INTRO ========================================================= */ .gapvct-card > p{ margin:0 0 25px; color:var(--gapvct-text); } .gapvct-card > p strong{ color:var(--gapvct-navy); font-weight:800; } /* ========================================================= DETAILS ========================================================= */ .gapvct-details{ margin-top:3px; padding-top:21px; border-top:1px solid var(--gapvct-border); } .gapvct-details h3{ margin:0 0 15px; color:var(--gapvct-navy); font-size:16px; line-height:1.4; font-weight:900; letter-spacing:.3px; } .gapvct-details ul{ margin:0; padding:0; list-style:none; } .gapvct-details li{ position:relative; padding:0 0 10px 19px; color:var(--gapvct-text); font-size:15px; line-height:1.65; } .gapvct-details li:before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--gapvct-gold); } .gapvct-details li strong{ color:var(--gapvct-navy); font-weight:800; } /* ========================================================= VALUE PAIR — IBBI CARD ========================================================= */ .gapvct-value-pair{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:4px; } .gapvct-value-pair > div{ padding:17px; border:1px solid rgba(9,47,98,.10); background:var(--gapvct-soft); } .gapvct-value-pair strong{ display:block; margin-bottom:7px; color:var(--gapvct-navy); font-family: Georgia, "Times New Roman", serif; font-size:19px; line-height:1.3; } .gapvct-value-pair span{ display:block; color:var(--gapvct-muted); font-size:15px; line-height:1.55; } /* ========================================================= CARD FOOTER ========================================================= */ .gapvct-card-footer{ margin-top:auto; padding-top:22px; border-top:1px solid var(--gapvct-border); } .gapvct-card-footer span{ display:block; color:var(--gapvct-muted); font-size:15px; line-height:1.65; } .gapvct-card-footer strong{ color:var(--gapvct-navy); font-weight:800; } /* ========================================================= SELECTION / CTA SECTION ========================================================= */ .gapvct-selection{ position:relative; overflow:hidden; padding:0 24px 90px; background:var(--gapvct-ivory); } .gapvct-selection-inner{ position:relative; display:grid; grid-template-columns: 100px minmax(0,1fr) auto; align-items:center; gap:30px; padding:38px 40px; border:1px solid rgba(197,150,47,.38); background: linear-gradient( 125deg, #061f40, #092f62 ); box-shadow: 0 25px 60px rgba(6,31,64,.15); } .gapvct-selection-mark{ width:82px; height:82px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvct-gold-light); border-radius:50%; color:var(--gapvct-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:29px; font-weight:700; } .gapvct-selection-content > span{ display:block; margin-bottom:7px; color:var(--gapvct-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.6px; } .gapvct-selection-content h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.25; font-weight:500; } .gapvct-selection-content h2 strong{ color:var(--gapvct-gold-light); } .gapvct-selection-content p{ max-width:650px; margin:9px 0 0; color:rgba(255,255,255,.63); } .gapvct-selection-action{ display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:220px; } .gapvct-cta-button{ min-height:55px; display:flex; align-items:center; justify-content:center; gap:14px; padding:13px 20px; border:1px solid var(--gapvct-gold-light); background:var(--gapvct-gold); color:#ffffff; text-decoration:none; font-size:15px; line-height:1.3; font-weight:900; box-shadow: 0 10px 25px rgba(0,0,0,.20); transition:.25s ease; } .gapvct-cta-button b{ font-size:20px; } .gapvct-cta-button:hover{ color:#ffffff; background:#d0a13c; transform:translateY(-2px); } .gapvct-call-button{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:55px; padding:9px 15px; border:1px solid rgba(224,189,105,.35); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; text-align:center; transition:.25s ease; } .gapvct-call-button:hover{ color:#ffffff; border-color:var(--gapvct-gold-light); background:rgba(255,255,255,.08); } .gapvct-call-button small{ color:rgba(255,255,255,.55); font-size:15px; line-height:1.3; } .gapvct-call-button strong{ margin-top:3px; color:var(--gapvct-gold-light); font-size:17px; line-height:1.3; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1000px){ .gapvct-intro-grid{ grid-template-columns:1fr; gap:35px; } .gapvct-intro-copy{ max-width:800px; padding-left:0; padding-top:25px; border-left:0; border-top:1px solid rgba(224,189,105,.30); } .gapvct-selection-inner{ grid-template-columns: 80px minmax(0,1fr); } .gapvct-selection-action{ grid-column:2; flex-direction:row; align-items:stretch; } } /* ========================================================= TABLET / SMALL DESKTOP ========================================================= */ @media (max-width:760px){ .gapvct-certificates .gapvct-container{ grid-template-columns:1fr; } .gapvct-card{ min-height:auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvct-intro{ padding:68px 17px 55px; } .gapvct-intro-heading h1{ font-size:40px; letter-spacing:-1px; } .gapvct-eyebrow{ font-size:15px; letter-spacing:1.3px; } .gapvct-intro-copy p{ font-size:15px; } .gapvct-certificates{ padding:65px 17px; } .gapvct-card{ padding:29px 23px 25px; } .gapvct-card-number{ font-size:60px; right:18px; } .gapvct-card-top{ margin-bottom:25px; } .gapvct-card-heading{ gap:13px; } .gapvct-icon{ width:51px; height:51px; font-size:15px; } .gapvct-card-heading h2{ font-size:26px; } .gapvct-card > p{ font-size:15px; } .gapvct-value-pair{ grid-template-columns:1fr; } .gapvct-selection{ padding:0 17px 65px; } .gapvct-selection-inner{ grid-template-columns:1fr; gap:20px; padding:28px 20px; } .gapvct-selection-mark{ width:65px; height:65px; font-size:24px; } .gapvct-selection-content h2{ font-size:27px; } .gapvct-selection-action{ grid-column:auto; width:100%; flex-direction:column; } .gapvct-cta-button, .gapvct-call-button{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .gapvct-intro-heading h1{ font-size:35px; } .gapvct-card-heading h2{ font-size:24px; } .gapvct-selection-content h2{ font-size:25px; } } /* ========================================================= NRI PROPERTY VALUATION SECTION 195 / 197 / 55(2)(b) UNIQUE DESIGN SYSTEM ROYAL NAVY + GOLD ========================================================= */ .gapvNriHero *, .gapvNriTdsSection *, .gapvNriRoleSection *, .gapvNri197Section *, .gapvNriNetworkSection *, .gapvNriFinalSection *{ box-sizing:border-box; } /* ========================================================= HERO ========================================================= */ .gapvNriHero{ position:relative; overflow:hidden; padding:95px 24px 90px; background: radial-gradient( circle at 82% 18%, rgba(197,150,47,.16), transparent 27% ), linear-gradient( 135deg, #061f40 0%, #092f62 58%, #123f73 100% ); color:#ffffff; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .gapvNriHeroPattern{ position:absolute; width:700px; height:700px; right:-390px; top:-270px; border:1px solid rgba(224,189,105,.14); border-radius:50%; } .gapvNriHeroPattern:after{ content:""; position:absolute; inset:80px; border:1px solid rgba(224,189,105,.09); border-radius:50%; } .gapvNriHeroContainer{ position:relative; z-index:2; width:min(1220px,100%); margin:auto; display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:75px; align-items:center; } .gapvNriHeroContent{ max-width:850px; } .gapvNriEyebrow{ display:flex; align-items:center; gap:13px; margin-bottom:22px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvNriEyebrow span{ width:48px; height:2px; background:#e0bd69; } .gapvNriHero h1{ margin:0 0 27px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(45px,5.3vw,72px); line-height:1.04; letter-spacing:-2px; font-weight:500; } .gapvNriHero h1 strong{ display:block; color:#e0bd69; font-weight:700; } .gapvNriHeroLead{ max-width:820px; margin:0; color:rgba(255,255,255,.77); font-size:18px; line-height:1.82; } .gapvNriHeroLead strong{ color:#ffffff; font-weight:800; } /* ========================================================= HERO FACTS ========================================================= */ .gapvNriHeroFacts{ display:grid; grid-template-columns: repeat(4,1fr); margin-top:38px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gapvNriHeroFacts > div{ min-height:110px; display:flex; align-items:center; gap:13px; padding:18px; border-right:1px solid rgba(255,255,255,.10); } .gapvNriHeroFacts > div:last-child{ border-right:0; } .gapvNriHeroFacts strong{ color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:34px; line-height:1; } .gapvNriHeroFacts span{ color:rgba(255,255,255,.66); font-size:15px; line-height:1.45; font-weight:700; } /* ========================================================= HERO ACTIONS ========================================================= */ .gapvNriHeroActions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:32px; } .gapvNriPrimaryButton{ min-height:57px; display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:14px 22px; background:#c5962f; border:1px solid #e0bd69; color:#ffffff; text-decoration:none; font-size:15px; font-weight:900; box-shadow: 0 15px 32px rgba(0,0,0,.20); transition:.25s ease; } .gapvNriPrimaryButton b{ font-size:21px; } .gapvNriPrimaryButton:hover{ color:#ffffff; background:#d2a440; transform:translateY(-2px); } .gapvNriPhoneButton{ min-height:57px; display:flex; align-items:center; gap:11px; padding:9px 17px; border:1px solid rgba(224,189,105,.45); background:rgba(255,255,255,.045); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvNriPhoneButton:hover{ color:#ffffff; border-color:#e0bd69; background:rgba(255,255,255,.09); } .gapvNriPhoneIcon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid #e0bd69; color:#e0bd69; font-size:18px; } .gapvNriPhoneButton small{ display:block; color:rgba(255,255,255,.54); font-size:15px; line-height:1.3; } .gapvNriPhoneButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; } /* ========================================================= HERO SIDE PANEL ========================================================= */ .gapvNriHeroPanel{ position:relative; padding:28px; border:1px solid rgba(224,189,105,.42); background: linear-gradient( 145deg, rgba(255,255,255,.085), rgba(255,255,255,.025) ); box-shadow: 0 30px 70px rgba(0,0,0,.20); } .gapvNriPanelTop span{ display:block; margin-bottom:13px; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvNriPanelTop strong{ display:block; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:35px; line-height:1.05; font-weight:500; } .gapvNriPanelLine{ width:65px; height:2px; margin:25px 0; background:#c5962f; } .gapvNriPanelItem{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:13px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.10); } .gapvNriPanelItem > span{ color:#e0bd69; font-size:15px; font-weight:900; } .gapvNriPanelItem strong{ display:block; color:#ffffff; font-size:17px; } .gapvNriPanelItem p{ margin:5px 0 0; color:rgba(255,255,255,.60); font-size:15px; line-height:1.65; } .gapvNriPanelItem p strong{ display:inline; color:#ffffff; font-size:inherit; } .gapvNriPanelBottom{ padding-top:22px; } .gapvNriPanelBottom span{ display:block; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.6px; } .gapvNriPanelBottom strong{ display:block; margin-top:5px; color:rgba(255,255,255,.72); font-size:15px; line-height:1.55; } /* ========================================================= SHARED CONTAINER ========================================================= */ .gapvNriContainer{ width:min(1180px,100%); margin:auto; } /* ========================================================= SECTION 1 — TDS ========================================================= */ .gapvNriTdsSection{ padding:100px 24px; background:#fcfbf8; color:#26384d; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .gapvNriSectionHeading{ max-width:850px; margin:0 auto 55px; text-align:center; } .gapvNriSectionHeading > span{ display:block; margin-bottom:13px; color:#b88723; font-size:15px; font-weight:900; letter-spacing:2px; } .gapvNriSectionHeading h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(36px,4vw,53px); line-height:1.14; font-weight:500; } .gapvNriSectionHeading h2 strong{ color:#092f62; } .gapvNriSectionHeading p{ max-width:720px; margin:20px auto 0; color:#69798b; font-size:16px; line-height:1.75; } .gapvNriTdsLayout{ display:grid; grid-template-columns: minmax(0,1fr) 310px; gap:55px; align-items:stretch; } .gapvNriTdsMain{ padding:38px; border:1px solid rgba(9,47,98,.12); background:#ffffff; box-shadow: 0 20px 50px rgba(6,31,64,.07); } .gapvNriNumber{ color:#c5962f; font-family: Georgia, "Times New Roman", serif; font-size:50px; line-height:1; } .gapvNriTdsMain h3{ margin:20px 0 20px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.2; font-weight:500; } .gapvNriTdsMain h3 strong{ color:#092f62; } .gapvNriTdsMain p{ color:#596b7d; font-size:16px; line-height:1.82; } .gapvNriTdsMain p strong{ color:#092f62; font-weight:800; } .gapvNriImportantBox{ display:flex; gap:15px; margin-top:28px; padding:20px; border-left:4px solid #c5962f; background:#f8f3e7; } .gapvNriImportantIcon{ width:31px; height:31px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%; background:#c5962f; color:#ffffff; font-weight:900; } .gapvNriImportantBox strong{ color:#092f62; font-size:16px; } .gapvNriImportantBox p{ margin:5px 0 0; font-size:15px; line-height:1.7; } .gapvNriRatePanel{ display:flex; flex-direction:column; justify-content:center; padding:32px; background:#061f40; border:1px solid #123f73; color:#ffffff; text-align:center; } .gapvNriRatePanel > span{ color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.8px; } .gapvNriRatePanel strong{ margin-top:25px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:26px; line-height:1.2; font-weight:500; } .gapvNriRatePanel i{ margin:16px 0; color:#e0bd69; font-size:23px; font-style:normal; } /* ========================================================= SECTION 2 — VALUER ROLE ========================================================= */ .gapvNriRoleSection{ padding:100px 24px; background:#f3f6f9; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .gapvNriRoleHeader{ display:grid; grid-template-columns: 1.15fr .85fr; gap:60px; align-items:end; margin-bottom:50px; } .gapvNriRoleHeader > div > span{ display:block; margin-bottom:14px; color:#b88723; font-size:15px; font-weight:900; letter-spacing:2px; } .gapvNriRoleHeader h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(37px,4vw,53px); line-height:1.14; font-weight:500; } .gapvNriRoleHeader h2 strong{ color:#092f62; } .gapvNriRoleHeader > p{ margin:0; color:#69798b; font-size:16px; line-height:1.8; } .gapvNriRoleGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; } .gapvNriRoleCard{ position:relative; min-height:425px; display:flex; flex-direction:column; padding:32px 28px; background:#ffffff; border:1px solid rgba(9,47,98,.11); box-shadow: 0 15px 40px rgba(6,31,64,.055); transition:.25s ease; } .gapvNriRoleCard:hover{ transform:translateY(-5px); box-shadow: 0 22px 50px rgba(6,31,64,.10); } .gapvNriRoleCard:before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:#092f62; } .gapvNriRoleCardGold{ background: linear-gradient( 145deg, #ffffff, #faf5e8 ); } .gapvNriRoleCardGold:before{ background:#c5962f; } .gapvNriRoleNumber{ color:#c5962f; font-family: Georgia, "Times New Roman", serif; font-size:46px; line-height:1; } .gapvNriRoleCard > span{ display:block; margin-top:25px; color:#092f62; font-size:15px; font-weight:900; letter-spacing:1.5px; } .gapvNriRoleCard h3{ margin:12px 0 17px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:28px; line-height:1.22; font-weight:500; } .gapvNriRoleCard h3 strong{ color:#092f62; } .gapvNriRoleCard p{ margin:0; color:#617285; font-size:15px; line-height:1.8; } .gapvNriRoleCard p strong{ color:#092f62; font-weight:800; } .gapvNriRoleCard a{ display:inline-flex; margin-top:auto; padding-top:22px; color:#b88723; text-decoration:none; font-size:15px; font-weight:900; } .gapvNriRoleCard a:hover{ color:#092f62; } /* ========================================================= SECTION 3 — SECTION 197 ========================================================= */ .gapvNri197Section{ padding:95px 24px; background:#061f40; color:#ffffff; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .gapvNri197Container{ width:min(1120px,100%); margin:auto; display:grid; grid-template-columns:170px minmax(0,1fr); gap:55px; } .gapvNri197Badge{ width:145px; height:145px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(224,189,105,.60); border-radius:50%; color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:22px; line-height:1.2; font-weight:700; text-align:center; transform:rotate(-8deg); } .gapvNri197Content > span{ display:block; margin-bottom:13px; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:2px; } .gapvNri197Content h2{ max-width:800px; margin:0 0 22px; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(37px,4vw,53px); line-height:1.13; font-weight:500; } .gapvNri197Content h2 strong{ color:#e0bd69; } .gapvNri197Content > p{ max-width:850px; margin:0 0 16px; color:rgba(255,255,255,.68); font-size:16px; line-height:1.8; } .gapvNri197Steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; margin-top:35px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.12); } .gapvNri197Steps > div{ padding:23px; background:#092f62; } .gapvNri197Steps span{ display:block; color:#e0bd69; font-size:15px; font-weight:900; } .gapvNri197Steps strong{ display:block; margin-top:7px; color:#ffffff; font-size:17px; } .gapvNri197Steps p{ margin:6px 0 0; color:rgba(255,255,255,.60); font-size:15px; line-height:1.6; } /* ========================================================= SECTION 4 — NETWORK ========================================================= */ .gapvNriNetworkSection{ padding:75px 24px; background:#ffffff; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .gapvNriNetworkCard{ display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:25px; align-items:center; padding:32px; border:1px solid rgba(9,47,98,.13); background: linear-gradient( 110deg, #fbfaf7, #ffffff ); box-shadow: 0 18px 45px rgba(6,31,64,.06); } .gapvNriNetworkIcon{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; border:1px solid #c5962f; color:#b88723; font-family: Georgia, "Times New Roman", serif; font-size:22px; font-weight:800; } .gapvNriNetworkContent span{ display:block; color:#b88723; font-size:15px; font-weight:900; letter-spacing:1.5px; } .gapvNriNetworkContent h2{ margin:5px 0 6px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:30px; line-height:1.2; font-weight:500; } .gapvNriNetworkContent h2 strong{ color:#092f62; } .gapvNriNetworkContent p{ max-width:720px; margin:0; color:#657588; font-size:15px; line-height:1.7; } .gapvNriNetworkButton{ min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:13px 20px; background:#092f62; border:1px solid #092f62; color:#ffffff; text-decoration:none; font-size:15px; font-weight:900; white-space:nowrap; transition:.25s ease; } .gapvNriNetworkButton:hover{ color:#ffffff; background:#b88723; border-color:#b88723; } /* ========================================================= FINAL CTA ========================================================= */ .gapvNriFinalSection{ padding:80px 24px; background:#f3f6f9; font-family: "Inter", "Segoe UI", Arial, sans-serif; } .gapvNriFinalContainer{ width:min(1150px,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:38px; background: linear-gradient( 135deg, #061f40, #092f62 ); border:1px solid rgba(197,150,47,.55); box-shadow: 0 25px 60px rgba(6,31,64,.15); } .gapvNriFinalContent > span{ display:block; margin-bottom:8px; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.7px; } .gapvNriFinalContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:35px; line-height:1.2; font-weight:500; } .gapvNriFinalContent h2 strong{ color:#e0bd69; } .gapvNriFinalContent p{ max-width:650px; margin:10px 0 0; color:rgba(255,255,255,.64); font-size:15px; line-height:1.7; } .gapvNriFinalActions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gapvNriFinalButton{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:13px 22px; background:#c5962f; border:1px solid #e0bd69; color:#ffffff; text-decoration:none; font-size:15px; font-weight:900; transition:.25s ease; } .gapvNriFinalButton b{ font-size:20px; } .gapvNriFinalButton:hover{ color:#ffffff; background:#d2a440; transform:translateY(-2px); } .gapvNriFinalPhone{ min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 19px; border:1px solid rgba(224,189,105,.50); color:#ffffff; text-decoration:none; font-size:16px; font-weight:900; } .gapvNriFinalPhone:hover{ color:#ffffff; background:rgba(255,255,255,.08); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1050px){ .gapvNriHeroContainer{ grid-template-columns: minmax(0,1fr) 320px; gap:45px; } .gapvNriHeroFacts{ grid-template-columns: repeat(2,1fr); } .gapvNriHeroFacts > div:nth-child(2){ border-right:0; } .gapvNriTdsLayout{ grid-template-columns:1fr; } .gapvNriRatePanel{ min-height:260px; } .gapvNriRoleHeader{ grid-template-columns:1fr; gap:20px; } .gapvNriRoleGrid{ grid-template-columns:1fr; } .gapvNriRoleCard{ min-height:auto; } .gapvNriNetworkCard{ grid-template-columns:70px minmax(0,1fr); } .gapvNriNetworkButton{ grid-column:2; justify-self:start; } .gapvNriFinalContainer{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:700px){ .gapvNriHero{ padding:65px 17px 65px; } .gapvNriHeroContainer{ grid-template-columns:1fr; } .gapvNriHero h1{ font-size:42px; line-height:1.05; letter-spacing:-1px; } .gapvNriHeroLead{ font-size:17px; } .gapvNriHeroFacts{ grid-template-columns:1fr 1fr; } .gapvNriHeroFacts > div{ min-height:95px; padding:15px; } .gapvNriHeroFacts > div:nth-child(2){ border-right:0; } .gapvNriHeroFacts > div:nth-child(3){ border-top:1px solid rgba(255,255,255,.10); } .gapvNriHeroFacts > div:nth-child(4){ border-top:1px solid rgba(255,255,255,.10); border-right:0; } .gapvNriHeroActions{ flex-direction:column; align-items:stretch; } .gapvNriPrimaryButton, .gapvNriPhoneButton{ width:100%; justify-content:center; } .gapvNriHeroPanel{ padding:24px; } .gapvNriPanelTop strong{ font-size:31px; } /* TDS */ .gapvNriTdsSection, .gapvNriRoleSection, .gapvNri197Section{ padding:70px 17px; } .gapvNriSectionHeading h2, .gapvNriRoleHeader h2, .gapvNri197Content h2{ font-size:35px; } .gapvNriTdsMain{ padding:27px 22px; } .gapvNriTdsMain h3{ font-size:28px; } /* ROLE */ .gapvNriRoleCard{ padding:28px 24px; } /* 197 */ .gapvNri197Container{ grid-template-columns:1fr; gap:30px; } .gapvNri197Badge{ width:105px; height:105px; font-size:18px; } .gapvNri197Steps{ grid-template-columns:1fr; } /* NETWORK */ .gapvNriNetworkSection{ padding:60px 17px; } .gapvNriNetworkCard{ grid-template-columns:1fr; padding:25px 20px; } .gapvNriNetworkButton{ grid-column:auto; width:100%; } /* FINAL */ .gapvNriFinalSection{ padding:60px 17px; } .gapvNriFinalContainer{ padding:27px 20px; } .gapvNriFinalContent h2{ font-size:30px; } .gapvNriFinalActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvNriFinalButton, .gapvNriFinalPhone{ width:100%; justify-content:center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .gapvNriHero h1{ font-size:37px; } .gapvNriHeroFacts strong{ font-size:29px; } .gapvNriHeroFacts span{ font-size:15px; } .gapvNriSectionHeading h2, .gapvNriRoleHeader h2, .gapvNri197Content h2{ font-size:31px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS INDIA PROPERTY VALUATION SERVICES PAGE UNIQUE NAMESPACE: gapvs ROYAL NAVY + GOLD ========================================================= */ :root{ --gapvs-navy:#092f62; --gapvs-deep:#061f40; --gapvs-blue:#123f73; --gapvs-gold:#bd8b22; --gapvs-gold-light:#dfbb68; --gapvs-gold-pale:#f5ead0; --gapvs-white:#ffffff; --gapvs-cream:#fcfbf7; --gapvs-light:#f4f7fa; --gapvs-text:#35485c; --gapvs-muted:#6d7d8e; --gapvs-border:rgba(9,47,98,.13); } /* ========================================================= BASE ========================================================= */ .gapvsHero *, .gapvsServices *, .gapvsCTA *{ box-sizing:border-box; } .gapvsHero, .gapvsServices, .gapvsCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvsHero p, .gapvsServices p, .gapvsCTA p{ font-size:16px; line-height:1.8; } /* ========================================================= HERO ========================================================= */ .gapvsHero{ position:relative; overflow:hidden; padding:88px 24px 85px; color:#ffffff; background: radial-gradient( circle at 86% 20%, rgba(223,187,104,.16), transparent 28% ), linear-gradient( 135deg, #061f40 0%, #092f62 58%, #123f73 100% ); } .gapvsHeroGlow{ position:absolute; width:600px; height:600px; right:-300px; bottom:-400px; border:1px solid rgba(223,187,104,.13); border-radius:50%; } .gapvsHeroInner{ position:relative; z-index:2; max-width:1050px; margin:0 auto; text-align:center; } .gapvsHeroKicker{ display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:22px; color:var(--gapvs-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvsHeroKicker span:first-child{ width:45px; height:2px; background:var(--gapvs-gold-light); } .gapvsHeroInner h1{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(46px,5.5vw,72px); line-height:1.04; letter-spacing:-2px; font-weight:500; } .gapvsHeroInner h1 strong{ display:block; margin-top:8px; color:var(--gapvs-gold-light); font-weight:700; } .gapvsHeroInner > p{ max-width:850px; margin:27px auto 0; color:rgba(255,255,255,.76); font-size:18px; line-height:1.8; } .gapvsHeroInner > p strong{ color:#ffffff; font-weight:800; } .gapvsHeroTags{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:30px; } .gapvsHeroTags span{ padding:9px 15px; border:1px solid rgba(223,187,104,.35); background:rgba(255,255,255,.045); color:rgba(255,255,255,.84); font-size:15px; line-height:1.3; font-weight:800; } /* ========================================================= SERVICES SECTION ========================================================= */ .gapvsServices{ padding:105px 24px; background:var(--gapvs-cream); } .gapvsServicesHeader{ display:grid; grid-template-columns: 1.1fr .9fr; gap:70px; align-items:end; max-width:1180px; margin:0 auto 55px; } .gapvsSectionEyebrow{ display:block; margin-bottom:13px; color:var(--gapvs-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvsServicesHeader h2{ margin:0; color:var(--gapvs-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,54px); line-height:1.12; font-weight:500; } .gapvsServicesHeader h2 strong{ color:var(--gapvs-navy); font-weight:700; } .gapvsServicesHeader > p{ margin:0; color:var(--gapvs-muted); font-size:16px; } .gapvsServicesHeader > p strong{ color:var(--gapvs-navy); font-weight:800; } /* ========================================================= SERVICE LIST ========================================================= */ .gapvsServiceList{ max-width:1180px; margin:0 auto; border-top:1px solid var(--gapvs-border); } /* ========================================================= SERVICE CARD ========================================================= */ .gapvsServiceCard{ position:relative; display:grid; grid-template-columns: 70px 115px minmax(0,1fr) 42px; gap:25px; align-items:start; padding:34px 25px; border-right:1px solid transparent; border-bottom:1px solid var(--gapvs-border); background:#ffffff; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .gapvsServiceCard:hover{ z-index:3; transform:translateX(5px); border-color:rgba(189,139,34,.35); box-shadow: 0 18px 45px rgba(6,31,64,.10); } .gapvsServiceCardAccent{ background: linear-gradient( 90deg, #ffffff, #fffdf8 ); } .gapvsServiceCardFinal{ border-bottom:0; } /* ========================================================= SERVICE NUMBER ========================================================= */ .gapvsServiceNumber{ color:var(--gapvs-gold); font-family: Georgia, "Times New Roman", serif; font-size:39px; line-height:1; font-weight:500; } /* ========================================================= BADGE ========================================================= */ .gapvsServiceBadge{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; } .gapvsServiceBadge span{ color:var(--gapvs-muted); font-size:15px; line-height:1.35; font-weight:900; letter-spacing:1px; } .gapvsServiceBadge strong{ min-width:68px; padding:8px 10px; border:1px solid rgba(189,139,34,.40); background:var(--gapvs-gold-pale); color:var(--gapvs-navy); font-size:15px; line-height:1.2; text-align:center; font-weight:900; } /* ========================================================= SERVICE CONTENT ========================================================= */ .gapvsServiceContent h3{ margin:0 0 13px; color:var(--gapvs-deep); font-family: Georgia, "Times New Roman", serif; font-size:28px; line-height:1.25; font-weight:500; } .gapvsServiceContent h3 strong{ color:var(--gapvs-navy); font-weight:700; } .gapvsServiceContent p{ max-width:850px; margin:0; color:var(--gapvs-text); font-size:16px; line-height:1.8; } .gapvsServiceContent p strong{ color:var(--gapvs-navy); font-weight:800; } .gapvsServiceContent a{ color:var(--gapvs-navy); font-weight:900; text-decoration:none; border-bottom:1px solid rgba(189,139,34,.55); } .gapvsServiceContent a:hover{ color:var(--gapvs-gold); } /* ========================================================= ENGAGEMENT LINE ========================================================= */ .gapvsEngagement{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:19px; padding-top:15px; border-top:1px solid rgba(9,47,98,.08); } .gapvsEngagement span{ color:var(--gapvs-muted); font-size:15px; line-height:1.4; } .gapvsEngagement strong{ color:var(--gapvs-navy); font-size:15px; line-height:1.4; font-weight:900; } /* ========================================================= ARROW ========================================================= */ .gapvsServiceArrow{ align-self:center; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(9,47,98,.14); color:var(--gapvs-gold); font-size:22px; transition:.3s ease; } .gapvsServiceCard:hover .gapvsServiceArrow{ color:#ffffff; background:var(--gapvs-gold); border-color:var(--gapvs-gold); transform:translateX(3px); } /* ========================================================= CTA ========================================================= */ .gapvsCTA{ position:relative; overflow:hidden; padding:75px 24px; background:var(--gapvs-deep); } .gapvsCTAContainer{ position:relative; overflow:hidden; max-width:1180px; margin:0 auto; padding:48px 52px; display:flex; align-items:center; justify-content:space-between; gap:45px; border:1px solid rgba(223,187,104,.38); background: linear-gradient( 125deg, rgba(255,255,255,.055), rgba(255,255,255,.018) ); } .gapvsCTAGlow{ position:absolute; width:350px; height:350px; right:-160px; top:-210px; border:1px solid rgba(223,187,104,.16); border-radius:50%; } .gapvsCTAContent{ position:relative; z-index:2; max-width:700px; } .gapvsCTAOverline{ display:block; margin-bottom:10px; color:var(--gapvs-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .gapvsCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(34px,4vw,49px); line-height:1.12; font-weight:500; } .gapvsCTAContent h2 strong{ color:var(--gapvs-gold-light); font-weight:700; } .gapvsCTAContent p{ max-width:650px; margin:17px 0 0; color:rgba(255,255,255,.65); } .gapvsCTAContent p strong{ color:#ffffff; } .gapvsCTAActions{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:285px; } .gapvsCTAButton{ min-height:58px; display:flex; align-items:center; justify-content:center; gap:15px; padding:14px 22px; border:1px solid var(--gapvs-gold-light); background:var(--gapvs-gold); color:#ffffff; text-decoration:none; font-size:16px; line-height:1.3; font-weight:900; box-shadow: 0 14px 35px rgba(0,0,0,.24); transition:.3s ease; } .gapvsCTAButton b{ font-size:21px; } .gapvsCTAButton:hover{ color:#ffffff; background:#d0a13c; transform:translateY(-3px); } .gapvsCTAPhone{ min-height:58px; display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 18px; border:1px solid rgba(223,187,104,.42); background:rgba(255,255,255,.035); color:#ffffff; text-decoration:none; transition:.3s ease; } .gapvsCTAPhone:hover{ color:#ffffff; border-color:var(--gapvs-gold-light); background:rgba(255,255,255,.08); } .gapvsPhoneIcon{ width:39px; height:39px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvs-gold-light); color:var(--gapvs-gold-light); font-size:18px; } .gapvsCTAPhone small{ display:block; color:rgba(255,255,255,.53); font-size:15px; line-height:1.3; } .gapvsCTAPhone strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1050px){ .gapvsServicesHeader{ gap:40px; } .gapvsServiceCard{ grid-template-columns: 60px 105px minmax(0,1fr) 40px; gap:18px; padding:30px 20px; } .gapvsCTAContainer{ padding:40px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:850px){ .gapvsHero{ padding:70px 20px; } .gapvsServices{ padding:80px 20px; } .gapvsServicesHeader{ grid-template-columns:1fr; gap:20px; margin-bottom:40px; } .gapvsServiceCard{ grid-template-columns: 55px 100px minmax(0,1fr); } .gapvsServiceArrow{ display:none; } .gapvsCTAContainer{ flex-direction:column; align-items:flex-start; padding:40px 30px; } .gapvsCTAActions{ width:100%; flex-direction:row; flex-wrap:wrap; } .gapvsCTAButton, .gapvsCTAPhone{ flex:1 1 250px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvsHero{ padding:58px 17px 62px; } .gapvsHeroKicker{ font-size:15px; letter-spacing:1.2px; } .gapvsHeroInner h1{ font-size:41px; line-height:1.04; letter-spacing:-1px; } .gapvsHeroInner > p{ font-size:16px; line-height:1.75; } .gapvsHeroTags{ justify-content:flex-start; } .gapvsHeroTags span{ font-size:15px; padding:8px 11px; } /* SERVICES */ .gapvsServices{ padding:68px 17px; } .gapvsServicesHeader h2{ font-size:36px; } .gapvsServiceCard{ display:grid; grid-template-columns: 50px minmax(0,1fr); gap:0; padding:28px 20px; } .gapvsServiceNumber{ grid-column:1; grid-row:1 / span 4; font-size:33px; } .gapvsServiceBadge{ grid-column:2; grid-row:1; flex-direction:row; align-items:center; gap:10px; margin-bottom:15px; } .gapvsServiceBadge strong{ min-width:auto; } .gapvsServiceContent{ grid-column:2; grid-row:2; } .gapvsServiceContent h3{ font-size:25px; } .gapvsServiceContent p{ font-size:15px; line-height:1.8; } .gapvsEngagement{ align-items:flex-start; flex-direction:column; gap:5px; } /* CTA */ .gapvsCTA{ padding:60px 17px; } .gapvsCTAContainer{ padding:30px 20px; } .gapvsCTAContent h2{ font-size:34px; } .gapvsCTAActions{ flex-direction:column; width:100%; } .gapvsCTAButton, .gapvsCTAPhone{ width:100%; flex:initial; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:390px){ .gapvsHeroInner h1{ font-size:37px; } .gapvsServicesHeader h2{ font-size:32px; } .gapvsServiceCard{ padding:25px 17px; } .gapvsServiceNumber{ font-size:29px; } .gapvsServiceContent h3{ font-size:23px; } .gapvsCTAContent h2{ font-size:30px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS PROPERTY VALUATION SERVICES UNIQUE NAMESPACE: gapvs- ========================================================= */ :root{ --gapvs-navy:#092f62; --gapvs-deep:#061f40; --gapvs-navy2:#123f73; --gapvs-gold:#c5962f; --gapvs-gold-light:#e0bd69; --gapvs-gold-soft:#f4e7c6; --gapvs-white:#ffffff; --gapvs-ivory:#fcfbf8; --gapvs-light:#f5f7fa; --gapvs-text:#33475b; --gapvs-muted:#718096; --gapvs-border:rgba(9,47,98,.13); } /* ========================================================= BASE ========================================================= */ .gapvsHero *, .gapvsIntro *, .gapvsServices *{ box-sizing:border-box; } .gapvsHero, .gapvsIntro, .gapvsServices{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvsHero p, .gapvsIntro p, .gapvsServices p{ font-size:16px; line-height:1.8; } /* ========================================================= COMMON CONTAINER ========================================================= */ .gapvsContainer{ width:min(1220px,100%); margin:auto; } /* ========================================================= HERO ========================================================= */ .gapvsHero{ position:relative; overflow:hidden; padding:95px 24px 85px; color:#ffffff; background: radial-gradient( circle at 90% 10%, rgba(224,189,105,.14), transparent 25% ), linear-gradient( 135deg, #061f40 0%, #092f62 60%, #123f73 100% ); } .gapvsHeroGlow{ position:absolute; border:1px solid rgba(224,189,105,.11); border-radius:50%; pointer-events:none; } .gapvsHeroGlowOne{ width:680px; height:680px; right:-380px; top:-300px; } .gapvsHeroGlowTwo{ width:360px; height:360px; left:-270px; bottom:-240px; } .gapvsHeroInner{ position:relative; z-index:2; max-width:1040px; margin:auto; text-align:center; } .gapvsHeroKicker{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:22px; color:var(--gapvs-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2.2px; } .gapvsHeroKicker span{ width:45px; height:2px; background:var(--gapvs-gold-light); } .gapvsHero h1{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(46px,6vw,78px); line-height:1.03; letter-spacing:-2.5px; font-weight:500; } .gapvsHero h1 strong{ display:block; margin-top:8px; color:var(--gapvs-gold-light); font-weight:700; } .gapvsHeroIntro{ max-width:850px; margin:28px auto 0; color:rgba(255,255,255,.76); font-size:18px !important; line-height:1.8 !important; } .gapvsHeroIntro strong{ color:#ffffff; font-weight:800; } .gapvsHeroHighlights{ display:grid; grid-template-columns: repeat(3,1fr); max-width:900px; margin:45px auto 0; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gapvsHeroHighlights div{ min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; border-right:1px solid rgba(255,255,255,.10); } .gapvsHeroHighlights div:last-child{ border-right:0; } .gapvsHeroHighlights strong{ color:var(--gapvs-gold-light); font-family: Georgia, "Times New Roman", serif; font-size:28px; line-height:1.2; } .gapvsHeroHighlights span{ margin-top:5px; color:rgba(255,255,255,.62); font-size:15px; line-height:1.4; } /* ========================================================= INTRO ========================================================= */ .gapvsIntro{ padding:90px 24px 80px; background:var(--gapvs-ivory); } .gapvsIntroGrid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:80px; align-items:end; } .gapvsEyebrow{ display:block; margin-bottom:14px; color:var(--gapvs-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvsIntroTitle h2{ margin:0; color:var(--gapvs-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4.2vw,56px); line-height:1.12; font-weight:500; } .gapvsIntroTitle h2 strong{ color:var(--gapvs-navy); font-weight:700; } .gapvsIntroText{ padding-left:30px; border-left:3px solid var(--gapvs-gold); } .gapvsIntroText p{ margin:0 0 16px; color:var(--gapvs-text); } .gapvsIntroText p:last-child{ margin-bottom:0; } .gapvsIntroText strong{ color:var(--gapvs-navy); font-weight:800; } /* ========================================================= SERVICE SECTION BASE ========================================================= */ .gapvsServices{ padding:90px 24px; } .gapvsServicesLight{ background:#ffffff; } .gapvsServicesGold{ background: linear-gradient( 135deg, #fffdf8, #f8f2e6 ); } .gapvsServicesNavy{ color:#ffffff; background: radial-gradient( circle at 88% 10%, rgba(224,189,105,.12), transparent 25% ), linear-gradient( 135deg, #061f40, #092f62 ); } .gapvsServicesFinal{ padding-bottom:100px; } /* ========================================================= SECTION HEADINGS ========================================================= */ .gapvsSectionHeading{ max-width:850px; margin:0 auto 48px; text-align:center; } .gapvsSectionHeading > span{ display:block; margin-bottom:12px; color:var(--gapvs-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvsSectionHeading h2{ margin:0; color:var(--gapvs-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(36px,4vw,52px); line-height:1.15; font-weight:500; } .gapvsSectionHeading h2 strong{ color:var(--gapvs-navy); font-weight:700; } .gapvsSectionHeadingLight > span{ color:var(--gapvs-gold-light); } .gapvsSectionHeadingLight h2{ color:#ffffff; } .gapvsSectionHeadingLight h2 strong{ color:var(--gapvs-gold-light); } /* ========================================================= SERVICE GRID ========================================================= */ .gapvsServiceGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; } /* ========================================================= SERVICE CARD ========================================================= */ .gapvsServiceCard{ position:relative; min-height:540px; display:flex; flex-direction:column; padding:35px 34px 30px; border:1px solid var(--gapvs-border); background:#ffffff; box-shadow: 0 18px 45px rgba(6,31,64,.06); overflow:hidden; transition: transform .3s ease, box-shadow .3s ease; } .gapvsServiceCard:hover{ transform:translateY(-6px); box-shadow: 0 28px 60px rgba(6,31,64,.12); } .gapvsServiceCard:before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--gapvs-navy); } .gapvsServiceCardFeatured{ background: linear-gradient( 145deg, #ffffff, #fbf7ed ); border-color:rgba(197,150,47,.25); } .gapvsServiceCardFeatured:before{ background:var(--gapvs-gold); } /* ========================================================= SERVICE NUMBER ========================================================= */ .gapvsServiceNumber{ position:absolute; top:24px; right:28px; color:rgba(9,47,98,.07); font-family: Georgia, "Times New Roman", serif; font-size:75px; line-height:1; font-weight:700; } /* ========================================================= SERVICE META ========================================================= */ .gapvsServiceMeta{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:26px; padding-right:70px; } .gapvsServiceMeta span{ color:var(--gapvs-gold); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.6px; } .gapvsServiceMeta strong{ color:var(--gapvs-navy); font-size:15px; line-height:1.4; font-weight:900; } /* ========================================================= SERVICE HEADING ========================================================= */ .gapvsServiceCard h2{ position:relative; z-index:2; max-width:600px; margin:0; color:var(--gapvs-deep); font-family: Georgia, "Times New Roman", serif; font-size:clamp(30px,3vw,39px); line-height:1.18; font-weight:500; } .gapvsServiceCard h2 strong{ color:var(--gapvs-navy); font-weight:700; } .gapvsServiceRule{ width:75px; height:2px; margin:24px 0; background:var(--gapvs-gold); } .gapvsServiceCard > p{ position:relative; z-index:2; margin:0 0 15px; color:var(--gapvs-text); } .gapvsServiceCard > p strong{ color:var(--gapvs-navy); font-weight:800; } /* ========================================================= CAPITAL GAIN SPECIAL LINK ========================================================= */ .gapvsServiceSpecial{ display:flex; flex-direction:column; gap:5px; margin-top:6px; padding:14px 16px; border-left:3px solid var(--gapvs-gold); background:#faf7ef; } .gapvsServiceSpecial span{ color:var(--gapvs-muted); font-size:15px; font-weight:900; letter-spacing:1px; } .gapvsServiceSpecial a{ color:var(--gapvs-navy); font-size:15px; line-height:1.5; font-weight:900; text-decoration:none; } .gapvsServiceSpecial a:hover{ color:var(--gapvs-gold); } /* ========================================================= ENGAGEMENT ========================================================= */ .gapvsEngagement{ margin-top:auto; padding-top:22px; border-top:1px solid var(--gapvs-border); } .gapvsEngagement span{ display:block; margin-bottom:5px; color:var(--gapvs-muted); font-size:15px; line-height:1.4; } .gapvsEngagement strong{ display:block; color:var(--gapvs-navy); font-size:15px; line-height:1.5; font-weight:900; } /* ========================================================= DARK SERVICE CARDS ========================================================= */ .gapvsServiceCardDark{ border-color:rgba(255,255,255,.12); background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.018) ); box-shadow:none; } .gapvsServiceCardDark:hover{ box-shadow: 0 25px 55px rgba(0,0,0,.22); } .gapvsServiceCardDark:before{ background:var(--gapvs-gold); } .gapvsServiceCardDark .gapvsServiceNumber{ color:rgba(255,255,255,.055); } .gapvsServiceCardDark .gapvsServiceMeta span{ color:var(--gapvs-gold-light); } .gapvsServiceCardDark .gapvsServiceMeta strong{ color:#ffffff; } .gapvsServiceCardDark h2{ color:#ffffff; } .gapvsServiceCardDark h2 strong{ color:var(--gapvs-gold-light); } .gapvsServiceCardDark > p{ color:rgba(255,255,255,.67); } .gapvsServiceCardDark > p strong{ color:#ffffff; } .gapvsServiceCardDark .gapvsEngagement{ border-color:rgba(255,255,255,.12); } .gapvsServiceCardDark .gapvsEngagement span{ color:rgba(255,255,255,.45); } .gapvsServiceCardDark .gapvsEngagement strong{ color:var(--gapvs-gold-light); } /* ========================================================= GOLD DARK CARD ========================================================= */ .gapvsServiceCardGold{ border-color:rgba(224,189,105,.30); background: linear-gradient( 145deg, rgba(197,150,47,.13), rgba(255,255,255,.025) ); } .gapvsServiceCardGold:before{ height:5px; background: linear-gradient( 90deg, var(--gapvs-gold), var(--gapvs-gold-light) ); } /* ========================================================= FINAL CTA ========================================================= */ .gapvsFinalCTA{ display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:55px; padding:35px 32px; border:1px solid rgba(224,189,105,.40); background: linear-gradient( 120deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ); } .gapvsFinalContent{ max-width:700px; } .gapvsFinalContent > span{ display:block; margin-bottom:8px; color:var(--gapvs-gold-light); font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .gapvsFinalContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:34px; line-height:1.2; font-weight:500; } .gapvsFinalContent h2 strong{ color:var(--gapvs-gold-light); } .gapvsFinalContent p{ margin:10px 0 0; color:rgba(255,255,255,.60); font-size:15px; line-height:1.7; } .gapvsFinalActions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gapvsCTAButton{ min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:14px 24px; background:var(--gapvs-gold); border:1px solid var(--gapvs-gold-light); color:#ffffff; text-decoration:none; font-size:16px; line-height:1.3; font-weight:900; box-shadow: 0 12px 30px rgba(0,0,0,.20); transition:.25s ease; } .gapvsCTAButton b{ font-size:21px; } .gapvsCTAButton:hover{ color:#ffffff; background:#d0a13c; transform:translateY(-2px); } .gapvsPhoneButton{ min-height:58px; display:flex; align-items:center; gap:11px; padding:8px 17px; border:1px solid rgba(224,189,105,.45); background:rgba(255,255,255,.04); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvsPhoneButton:hover{ color:#ffffff; background:rgba(255,255,255,.09); border-color:var(--gapvs-gold-light); } .gapvsPhoneIcon{ width:39px; height:39px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gapvs-gold-light); color:var(--gapvs-gold-light); font-size:18px; } .gapvsPhoneButton small{ display:block; color:rgba(255,255,255,.50); font-size:15px; line-height:1.3; } .gapvsPhoneButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:950px){ .gapvsIntroGrid{ grid-template-columns:1fr; gap:30px; } .gapvsIntroText{ padding-left:22px; } .gapvsServiceGrid{ grid-template-columns:1fr; } .gapvsServiceCard{ min-height:470px; } .gapvsFinalCTA{ align-items:flex-start; flex-direction:column; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:700px){ .gapvsHero{ padding:70px 18px 65px; } .gapvsHero h1{ font-size:45px; letter-spacing:-1.5px; } .gapvsHeroIntro{ font-size:17px !important; } .gapvsHeroHighlights{ grid-template-columns:1fr; } .gapvsHeroHighlights div{ min-height:80px; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gapvsHeroHighlights div:last-child{ border-bottom:0; } .gapvsIntro, .gapvsServices{ padding:70px 18px; } .gapvsSectionHeading{ margin-bottom:38px; } .gapvsServiceCard{ min-height:auto; padding:30px 24px 26px; } .gapvsServiceNumber{ font-size:62px; } .gapvsServiceMeta{ align-items:flex-start; flex-direction:column; gap:5px; } .gapvsServiceCard h2{ font-size:30px; } .gapvsFinalCTA{ padding:27px 20px; } .gapvsFinalContent h2{ font-size:29px; } .gapvsFinalActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvsCTAButton, .gapvsPhoneButton{ width:100%; justify-content:center; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:480px){ .gapvsHeroKicker{ align-items:flex-start; font-size:15px; letter-spacing:1.3px; text-align:left; } .gapvsHeroKicker span{ width:30px; margin-top:8px; } .gapvsHero h1{ font-size:39px; line-height:1.05; } .gapvsHeroIntro{ font-size:16px !important; line-height:1.75 !important; } .gapvsIntroTitle h2, .gapvsSectionHeading h2{ font-size:33px; } .gapvsIntroText{ padding-left:18px; } .gapvsServiceCard{ padding:27px 20px 23px; } .gapvsServiceCard h2{ font-size:28px; } .gapvsServiceCard > p{ font-size:15px; line-height:1.78; } .gapvsServiceNumber{ top:18px; right:18px; font-size:55px; } .gapvsServiceMeta{ padding-right:50px; } .gapvsFinalContent h2{ font-size:27px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS OUR PROCESS — UNIQUE DESIGN SYSTEM ROYAL NAVY + GOLD ========================================================= */ .gapvProcessHero *, .gapvProcessTimeline *, .gapvProcessCTA *{ box-sizing:border-box; } .gapvProcessHero, .gapvProcessTimeline, .gapvProcessCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } /* ========================================================= HERO ========================================================= */ .gapvProcessHero{ position:relative; overflow:hidden; padding:92px 24px 82px; color:#ffffff; background: radial-gradient( circle at 82% 20%, rgba(197,150,47,.16), transparent 28% ), linear-gradient( 135deg, #061f40 0%, #092f62 58%, #123f73 100% ); } .gapvProcessHeroGlow{ position:absolute; width:520px; height:520px; right:-280px; bottom:-300px; border:1px solid rgba(224,189,105,.18); border-radius:50%; } .gapvProcessHeroInner{ position:relative; z-index:2; max-width:1040px; margin:auto; text-align:center; } .gapvProcessEyebrow{ display:inline-flex; align-items:center; gap:13px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2.2px; } .gapvProcessEyebrow:before, .gapvProcessEyebrow:after{ content:""; width:42px; height:1px; background:#c5962f; } .gapvProcessHero h1{ margin:22px 0 0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(52px,6vw,78px); line-height:1; letter-spacing:-2.5px; font-weight:500; } .gapvProcessHero h1 span{ display:block; margin-top:8px; color:#e0bd69; font-weight:700; } .gapvProcessHeroInner > p{ max-width:850px; margin:30px auto 0; color:rgba(255,255,255,.73); font-size:18px; line-height:1.85; } .gapvProcessHeroInner p strong{ color:#ffffff; font-weight:800; } .gapvProcessHeroMeta{ display:flex; justify-content:center; flex-wrap:wrap; margin-top:42px; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); } .gapvProcessHeroMeta span{ min-width:190px; padding:18px 25px; color:rgba(255,255,255,.58); font-size:15px; line-height:1.5; } .gapvProcessHeroMeta span + span{ border-left:1px solid rgba(255,255,255,.12); } .gapvProcessHeroMeta strong{ display:block; margin-bottom:3px; color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:22px; } /* ========================================================= PROCESS TIMELINE SECTION ========================================================= */ .gapvProcessTimeline{ padding:105px 24px; background:#f8fafc; } .gapvProcessTimelineHeader{ max-width:850px; margin:0 auto 70px; text-align:center; } .gapvProcessTimelineHeader > span{ display:block; margin-bottom:14px; color:#b88723; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvProcessTimelineHeader h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(38px,4vw,56px); line-height:1.12; font-weight:500; } .gapvProcessTimelineHeader h2 strong{ color:#092f62; font-weight:700; } .gapvProcessTimelineHeader p{ margin:20px auto 0; color:#66788b; font-size:16px; line-height:1.8; } .gapvProcessRoadmap{ position:relative; max-width:1100px; margin:auto; } .gapvProcessRoadmap:before{ content:""; position:absolute; top:0; bottom:0; left:35px; width:1px; background: linear-gradient( to bottom, transparent, rgba(184,135,35,.55) 5%, rgba(184,135,35,.55) 95%, transparent ); } /* ========================================================= PROCESS STEP ========================================================= */ .gapvProcessStep{ position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:30px; margin-bottom:45px; } .gapvProcessStep:last-child{ margin-bottom:0; } .gapvProcessMarker{ position:relative; z-index:5; width:70px; height:70px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(184,135,35,.65); border-radius:50%; background:#f8fafc; box-shadow: 0 0 0 9px #f8fafc; } .gapvProcessMarker span{ color:#092f62; font-family: Georgia, "Times New Roman", serif; font-size:22px; line-height:1; font-weight:700; } .gapvProcessMarkerFinal{ border-color:#092f62; background:#092f62; } .gapvProcessMarkerFinal span{ color:#e0bd69; } /* ========================================================= PROCESS CARD ========================================================= */ .gapvProcessCard{ position:relative; padding:34px 36px; border:1px solid rgba(9,47,98,.10); background:#ffffff; box-shadow: 0 16px 42px rgba(6,31,64,.065); } .gapvProcessCard:before{ content:""; position:absolute; top:0; left:0; width:5px; height:100%; background:#092f62; } .gapvProcessCardFeatured{ border-color:rgba(184,135,35,.32); background: linear-gradient( 135deg, #ffffff 0%, #fcf8ee 100% ); } .gapvProcessCardFeatured:before{ background:#c5962f; } .gapvProcessCardFinal{ color:#ffffff; border-color:#123f73; background: linear-gradient( 135deg, #061f40, #092f62 ); box-shadow: 0 22px 55px rgba(6,31,64,.16); } .gapvProcessCardFinal:before{ background:#e0bd69; } .gapvProcessCardTop{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; } .gapvProcessStepTag{ color:#b88723; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.6px; } .gapvProcessCardFinal .gapvProcessStepTag{ color:#e0bd69; } .gapvProcessStepPurpose{ padding:6px 10px; border:1px solid rgba(9,47,98,.12); color:#092f62; font-size:15px; line-height:1.3; font-weight:900; letter-spacing:.7px; } .gapvProcessCardFinal .gapvProcessStepPurpose{ border-color:rgba(224,189,105,.35); color:#e0bd69; } .gapvProcessCard h3{ margin:0 0 15px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.25; font-weight:600; } .gapvProcessCardFinal h3{ color:#ffffff; } .gapvProcessCard > p{ margin:0 0 24px; color:#607286; font-size:16px; line-height:1.8; } .gapvProcessCardFinal > p{ color:rgba(255,255,255,.68); } .gapvProcessCard p strong{ color:#092f62; font-weight:800; } .gapvProcessCardFinal p strong{ color:#ffffff; } /* ========================================================= STEP 1 DETAILS ========================================================= */ .gapvProcessDetails{ display:grid; grid-template-columns: repeat(2,1fr); gap:0; border-top:1px solid rgba(9,47,98,.10); border-left:1px solid rgba(9,47,98,.10); } .gapvProcessDetails > div{ padding:18px; border-right:1px solid rgba(9,47,98,.10); border-bottom:1px solid rgba(9,47,98,.10); } .gapvProcessDetails strong{ display:block; margin-bottom:5px; color:#092f62; font-size:15px; line-height:1.4; font-weight:900; } .gapvProcessDetails span{ display:block; color:#66788b; font-size:15px; line-height:1.65; } .gapvProcessDetails span strong{ display:inline; color:#092f62; font-size:inherit; } /* ========================================================= HIGHLIGHT ========================================================= */ .gapvProcessHighlight{ display:flex; align-items:center; gap:14px; margin-top:20px; padding:14px 17px; border-left:3px solid #c5962f; background:#faf7ef; } .gapvProcessHighlight strong{ color:#092f62; font-size:15px; line-height:1.4; font-weight:900; } .gapvProcessHighlight span{ color:#66788b; font-size:15px; line-height:1.5; } /* ========================================================= DOCUMENT GRID ========================================================= */ .gapvProcessDocumentGrid{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; } .gapvProcessDocumentGrid span{ min-height:72px; display:flex; flex-direction:column; justify-content:center; padding:12px 13px; border:1px solid rgba(9,47,98,.10); background:#f9fbfd; color:#092f62; font-size:15px; line-height:1.4; font-weight:800; } .gapvProcessDocumentGrid small{ margin-top:3px; color:#7a8897; font-size:15px; line-height:1.35; font-weight:500; } /* ========================================================= INSPECTION GRID ========================================================= */ .gapvInspectionGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; } .gapvInspectionGrid > div{ padding:19px; border:1px solid rgba(9,47,98,.10); background:#f9fbfd; } .gapvInspectionIcon{ width:35px; height:35px; display:flex; align-items:center; justify-content:center; margin-bottom:13px; background:#092f62; color:#e0bd69; font-size:15px; font-weight:900; } .gapvInspectionGrid strong{ display:block; color:#092f62; font-size:16px; line-height:1.4; font-weight:900; } .gapvInspectionGrid p{ margin:7px 0 0; color:#6c7d8f; font-size:15px; line-height:1.6; } /* ========================================================= METHODOLOGY GRID ========================================================= */ .gapvMethodologyGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:15px; } .gapvMethodologyItem{ padding:21px; border:1px solid rgba(184,135,35,.18); background:rgba(255,255,255,.72); } .gapvMethodologyItem > span{ display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:30px; margin-bottom:12px; background:#092f62; color:#e0bd69; font-size:15px; font-weight:900; } .gapvMethodologyItem h4{ margin:0 0 8px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:21px; line-height:1.3; } .gapvMethodologyItem p{ margin:0; color:#637487; font-size:15px; line-height:1.7; } .gapvMethodologyItem p strong{ color:#092f62; } /* ========================================================= FINAL CERTIFICATE GRID ========================================================= */ .gapvCertificateGrid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; margin-top:28px; background:rgba(255,255,255,.12); } .gapvCertificateGrid > div{ padding:20px; background:rgba(255,255,255,.045); } .gapvCertificateGrid span{ display:block; margin-bottom:9px; color:#e0bd69; font-size:15px; font-weight:900; } .gapvCertificateGrid strong{ display:block; margin-bottom:7px; color:#ffffff; font-size:16px; line-height:1.4; } .gapvCertificateGrid p{ margin:0; color:rgba(255,255,255,.58); font-size:15px; line-height:1.6; } .gapvAcceptedBar{ display:flex; align-items:center; gap:18px; margin-top:22px; padding:16px 18px; border:1px solid rgba(224,189,105,.28); background:rgba(224,189,105,.07); } .gapvAcceptedBar span{ flex:0 0 auto; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1px; } .gapvAcceptedBar strong{ color:rgba(255,255,255,.76); font-size:15px; line-height:1.6; } /* ========================================================= FINAL CTA ========================================================= */ .gapvProcessCTA{ padding:0 24px 95px; background:#f8fafc; } .gapvProcessCTAInner{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:40px; max-width:1100px; margin:auto; padding:42px 45px; border:1px solid rgba(184,135,35,.35); background: radial-gradient( circle at 90% 10%, rgba(224,189,105,.16), transparent 30% ), linear-gradient( 135deg, #061f40, #092f62 ); } .gapvProcessCTAContent{ position:relative; z-index:2; } .gapvProcessCTAContent > span{ display:block; margin-bottom:8px; color:#e0bd69; font-size:15px; font-weight:900; letter-spacing:1.7px; } .gapvProcessCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:34px; line-height:1.2; font-weight:500; } .gapvProcessCTAContent h2 strong{ color:#e0bd69; } .gapvProcessCTAContent p{ max-width:650px; margin:11px 0 0; color:rgba(255,255,255,.63); font-size:15px; line-height:1.7; } .gapvProcessCTAActions{ position:relative; z-index:2; display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gapvProcessButton{ min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:14px 23px; border:1px solid #e0bd69; background:#c5962f; color:#ffffff; text-decoration:none; font-size:15px; line-height:1.4; font-weight:900; box-shadow: 0 12px 28px rgba(0,0,0,.22); transition:.25s ease; } .gapvProcessButton b{ font-size:21px; } .gapvProcessButton:hover{ color:#ffffff; background:#d1a13e; transform:translateY(-2px); } .gapvProcessCall{ min-height:58px; display:flex; flex-direction:column; justify-content:center; padding:8px 18px; border:1px solid rgba(224,189,105,.42); background:rgba(255,255,255,.04); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvProcessCall:hover{ color:#ffffff; border-color:#e0bd69; background:rgba(255,255,255,.08); } .gapvProcessCall span{ color:rgba(255,255,255,.50); font-size:15px; line-height:1.3; font-weight:800; letter-spacing:1px; } .gapvProcessCall strong{ margin-top:2px; color:#ffffff; font-size:17px; line-height:1.4; } /* ========================================================= RESPONSIVE — 1100 ========================================================= */ @media (max-width:1100px){ .gapvProcessDocumentGrid{ grid-template-columns: repeat(2,1fr); } .gapvCertificateGrid{ grid-template-columns: repeat(2,1fr); } .gapvProcessCTAInner{ padding:38px 32px; } } /* ========================================================= RESPONSIVE — 900 ========================================================= */ @media (max-width:900px){ .gapvProcessHero{ padding-top:75px; } .gapvProcessStep{ grid-template-columns:58px minmax(0,1fr); gap:22px; } .gapvProcessRoadmap:before{ left:28px; } .gapvProcessMarker{ width:56px; height:56px; } .gapvProcessMarker span{ font-size:18px; } .gapvInspectionGrid{ grid-template-columns: repeat(2,1fr); } .gapvProcessCTAInner{ flex-direction:column; align-items:flex-start; } } /* ========================================================= RESPONSIVE — 600 ========================================================= */ @media (max-width:600px){ .gapvProcessHero{ padding:65px 17px 55px; } .gapvProcessEyebrow{ font-size:15px; letter-spacing:1.3px; } .gapvProcessEyebrow:before, .gapvProcessEyebrow:after{ width:20px; } .gapvProcessHero h1{ font-size:43px; line-height:1.03; letter-spacing:-1.5px; } .gapvProcessHeroInner > p{ font-size:16px; line-height:1.75; } .gapvProcessHeroMeta{ display:grid; grid-template-columns: repeat(2,1fr); } .gapvProcessHeroMeta span{ min-width:0; padding:16px; } .gapvProcessHeroMeta span + span{ border-left:0; } .gapvProcessHeroMeta span:nth-child(odd){ border-right:1px solid rgba(255,255,255,.12); } .gapvProcessHeroMeta span:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.12); } /* TIMELINE */ .gapvProcessTimeline{ padding:72px 17px; } .gapvProcessTimelineHeader{ margin-bottom:45px; } .gapvProcessTimelineHeader h2{ font-size:35px; } .gapvProcessStep{ grid-template-columns:1fr; gap:15px; margin-bottom:35px; } .gapvProcessRoadmap:before{ display:none; } .gapvProcessMarker{ width:50px; height:50px; box-shadow:none; } .gapvProcessMarker span{ font-size:17px; } .gapvProcessCard{ padding:27px 21px; } .gapvProcessCard h3{ font-size:28px; } .gapvProcessCardTop{ align-items:flex-start; flex-direction:column; gap:8px; } /* DETAILS */ .gapvProcessDetails{ grid-template-columns:1fr; } .gapvProcessDocumentGrid{ grid-template-columns:1fr; } .gapvInspectionGrid{ grid-template-columns:1fr; } .gapvMethodologyGrid{ grid-template-columns:1fr; } .gapvCertificateGrid{ grid-template-columns:1fr; } .gapvAcceptedBar{ align-items:flex-start; flex-direction:column; gap:8px; } /* CTA */ .gapvProcessCTA{ padding:0 17px 70px; } .gapvProcessCTAInner{ padding:29px 21px; } .gapvProcessCTAContent h2{ font-size:29px; } .gapvProcessCTAActions{ width:100%; flex-direction:column; align-items:stretch; } .gapvProcessButton, .gapvProcessCall{ width:100%; justify-content:center; text-align:center; } } /* ========================================================= RESPONSIVE — 390 ========================================================= */ @media (max-width:390px){ .gapvProcessHero h1{ font-size:38px; } .gapvProcessTimelineHeader h2{ font-size:31px; } .gapvProcessCard h3{ font-size:26px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS INSIGHTS / RESEARCH PAGE UNIQUE NAMESPACE: gapvins- ========================================================= */ .gapvinsHero *, .gapvinsIntro *, .gapvinsResearch *, .gapvinsKnowledge *, .gapvinsCTA *{ box-sizing:border-box; } .gapvinsHero, .gapvinsIntro, .gapvinsResearch, .gapvinsKnowledge, .gapvinsCTA{ font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size:16px; } .gapvinsContainer{ width:min(1220px,100%); margin:0 auto; } /* ========================================================= HERO ========================================================= */ .gapvinsHero{ position:relative; overflow:hidden; padding:95px 24px 100px; background: radial-gradient( circle at 85% 25%, rgba(197,150,47,.15), transparent 25% ), linear-gradient( 135deg, #061f40 0%, #092f62 60%, #123f73 100% ); color:#ffffff; } .gapvinsHeroGlow{ position:absolute; border:1px solid rgba(224,189,105,.12); border-radius:50%; pointer-events:none; } .gapvinsHeroGlowOne{ width:650px; height:650px; right:-330px; top:-300px; } .gapvinsHeroGlowTwo{ width:430px; height:430px; left:-300px; bottom:-280px; } .gapvinsHeroInner{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,1fr) 280px; gap:80px; align-items:center; } .gapvinsHeroContent{ max-width:920px; } .gapvinsEyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:24px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvinsEyebrow span{ width:48px; height:2px; background:#e0bd69; } .gapvinsHero h1{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(48px,6vw,78px); line-height:1.02; letter-spacing:-2.5px; font-weight:500; } .gapvinsHero h1 strong{ display:block; color:#e0bd69; font-weight:700; } .gapvinsHeroContent > p{ max-width:850px; margin:30px 0 0; color:rgba(255,255,255,.72); font-size:18px; line-height:1.85; } .gapvinsHeroContent > p strong{ color:#ffffff; font-weight:800; } .gapvinsHeroMeta{ display:flex; flex-wrap:wrap; margin-top:38px; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); } .gapvinsHeroMeta span{ min-width:145px; display:flex; flex-direction:column; gap:4px; padding:18px 25px; border-right:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.55); font-size:15px; line-height:1.45; font-weight:700; } .gapvinsHeroMeta span:first-child{ padding-left:0; } .gapvinsHeroMeta span:last-child{ border-right:0; } .gapvinsHeroMeta b{ color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:23px; line-height:1.2; } /* ========================================================= HERO MARK ========================================================= */ .gapvinsHeroMark{ position:relative; display:flex; align-items:center; justify-content:center; } .gapvinsHeroMarkOuter{ width:225px; height:225px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(224,189,105,.55); transform:rotate(7deg); } .gapvinsHeroMarkInner{ width:185px; height:185px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(224,189,105,.30); background: rgba(255,255,255,.035); transform:rotate(-7deg); text-align:center; } .gapvinsHeroMarkInner span{ color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:43px; line-height:1; font-weight:700; } .gapvinsHeroMarkInner strong{ margin-top:6px; color:#ffffff; font-size:16px; letter-spacing:2px; } .gapvinsHeroMarkInner small{ margin-top:13px; color:rgba(255,255,255,.52); font-size:15px; line-height:1.4; letter-spacing:1px; } .gapvinsHeroVertical{ position:absolute; right:-25px; bottom:0; padding:9px 7px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.4px; writing-mode:vertical-rl; } /* ========================================================= INTRO ========================================================= */ .gapvinsIntro{ padding:85px 24px; background:#fcfbf8; } .gapvinsIntroGrid{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:50px; padding:15px 0; } .gapvinsIntroLabel{ display:flex; flex-direction:column; justify-content:space-between; min-height:190px; padding:5px 0 10px; border-right:1px solid rgba(9,47,98,.15); } .gapvinsIntroLabel span{ color:#b88723; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.7px; } .gapvinsIntroLabel strong{ color:#092f62; font-family: Georgia, "Times New Roman", serif; font-size:65px; line-height:1; font-weight:500; } .gapvinsIntroContent{ max-width:900px; } .gapvinsIntroContent h2{ margin:0 0 22px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(35px,4vw,52px); line-height:1.14; font-weight:500; } .gapvinsIntroContent h2 strong{ color:#092f62; font-weight:700; } .gapvinsIntroContent p{ margin:0 0 16px; color:#586b7d; font-size:16px; line-height:1.85; } .gapvinsIntroContent p strong{ color:#092f62; font-weight:800; } /* ========================================================= RESEARCH SECTION ========================================================= */ .gapvinsResearch{ padding:100px 24px 110px; background:#f3f6f9; } .gapvinsResearchHeader{ display:grid; grid-template-columns: 1fr .7fr; gap:60px; align-items:end; margin-bottom:50px; } .gapvinsSectionTag{ display:block; margin-bottom:12px; color:#b88723; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:2px; } .gapvinsResearchHeader h2{ margin:0; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:clamp(40px,4vw,56px); line-height:1.1; font-weight:500; } .gapvinsResearchHeader h2 strong{ color:#092f62; font-weight:700; } .gapvinsResearchHeader > p{ margin:0; color:#647589; font-size:16px; line-height:1.8; } .gapvinsResearchHeader > p strong{ color:#092f62; font-weight:800; } /* ========================================================= ARTICLE GRID ========================================================= */ .gapvinsArticleGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; } .gapvinsArticleCard{ position:relative; min-height:475px; display:flex; flex-direction:column; padding:28px 28px 25px; border:1px solid rgba(9,47,98,.12); background:#ffffff; box-shadow: 0 15px 35px rgba(6,31,64,.055); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .gapvinsArticleCard:hover{ transform:translateY(-7px); border-color:rgba(184,135,35,.40); box-shadow: 0 25px 55px rgba(6,31,64,.12); } .gapvinsArticleCard:before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:#092f62; } .gapvinsArticleGold{ background: linear-gradient( 145deg, #ffffff 0%, #fbf7ed 100% ); } .gapvinsArticleGold:before{ background:#b88723; } .gapvinsArticleTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:30px; } .gapvinsArticleNumber{ color:#b88723; font-family: Georgia, "Times New Roman", serif; font-size:42px; line-height:1; } .gapvinsArticleCategory{ padding:7px 9px; border:1px solid rgba(9,47,98,.13); color:#092f62; font-size:15px; line-height:1.3; font-weight:900; letter-spacing:.8px; text-align:right; } .gapvinsArticleBody{ flex:1; } .gapvinsArticleBody h3{ margin:0 0 19px; color:#061f40; font-family: Georgia, "Times New Roman", serif; font-size:26px; line-height:1.28; font-weight:500; } .gapvinsArticleBody h3 strong{ color:#092f62; font-weight:700; } .gapvinsArticleBody p{ margin:0; color:#647589; font-size:15px; line-height:1.75; } .gapvinsArticleBody p strong{ color:#092f62; font-weight:800; } .gapvinsArticleLink{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:28px; padding-top:17px; border-top:1px solid rgba(9,47,98,.11); color:#092f62; text-decoration:none; font-size:15px; line-height:1.4; font-weight:900; transition:.25s ease; } .gapvinsArticleLink span{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(184,135,35,.45); color:#b88723; font-size:18px; transition:.25s ease; } .gapvinsArticleLink:hover{ color:#b88723; } .gapvinsArticleLink:hover span{ color:#ffffff; background:#b88723; } /* ========================================================= KNOWLEDGE BAND ========================================================= */ .gapvinsKnowledge{ padding:65px 24px; background:#092f62; color:#ffffff; } .gapvinsKnowledgeInner{ display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:35px; align-items:center; padding:35px; border:1px solid rgba(224,189,105,.30); background: linear-gradient( 110deg, rgba(255,255,255,.045), rgba(255,255,255,.015) ); } .gapvinsKnowledgeNumber{ color:#e0bd69; font-family: Georgia, "Times New Roman", serif; font-size:72px; line-height:1; } .gapvinsKnowledgeText > span{ display:block; margin-bottom:8px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .gapvinsKnowledgeText h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:31px; line-height:1.25; font-weight:500; } .gapvinsKnowledgeText h2 strong{ color:#e0bd69; } .gapvinsKnowledgeText p{ max-width:800px; margin:10px 0 0; color:rgba(255,255,255,.62); font-size:15px; line-height:1.7; } .gapvinsKnowledgeButton{ min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:13px 20px; border:1px solid #e0bd69; background:#c5962f; color:#ffffff; text-decoration:none; white-space:nowrap; font-size:15px; line-height:1.4; font-weight:900; transition:.25s ease; } .gapvinsKnowledgeButton span{ font-size:20px; } .gapvinsKnowledgeButton:hover{ background:#d0a13c; color:#ffffff; transform:translateY(-2px); } /* ========================================================= FINAL CTA ========================================================= */ .gapvinsCTA{ padding:85px 24px; background:#061f40; color:#ffffff; } .gapvinsCTAInner{ display:flex; align-items:center; justify-content:space-between; gap:50px; padding:45px 50px; border:1px solid rgba(224,189,105,.34); background: radial-gradient( circle at 100% 0%, rgba(197,150,47,.13), transparent 35% ), rgba(255,255,255,.025); } .gapvinsCTAContent{ max-width:760px; } .gapvinsCTAContent > span{ display:block; margin-bottom:10px; color:#e0bd69; font-size:15px; line-height:1.4; font-weight:900; letter-spacing:1.8px; } .gapvinsCTAContent h2{ margin:0; color:#ffffff; font-family: Georgia, "Times New Roman", serif; font-size:clamp(34px,4vw,49px); line-height:1.13; font-weight:500; } .gapvinsCTAContent h2 strong{ color:#e0bd69; } .gapvinsCTAContent p{ max-width:700px; margin:15px 0 0; color:rgba(255,255,255,.63); font-size:16px; line-height:1.75; } .gapvinsCTAActions{ display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:245px; } .gapvinsPrimaryButton{ min-height:58px; display:flex; align-items:center; justify-content:center; gap:15px; padding:14px 22px; background:#c5962f; border:1px solid #e0bd69; color:#ffffff; text-decoration:none; font-size:16px; line-height:1.4; font-weight:900; box-shadow: 0 12px 30px rgba(0,0,0,.22); transition:.25s ease; } .gapvinsPrimaryButton span{ font-size:21px; } .gapvinsPrimaryButton:hover{ color:#ffffff; background:#d0a13c; transform:translateY(-2px); } .gapvinsPhoneButton{ min-height:58px; display:flex; align-items:center; justify-content:center; gap:11px; padding:9px 16px; border:1px solid rgba(224,189,105,.45); background:rgba(255,255,255,.035); color:#ffffff; text-decoration:none; transition:.25s ease; } .gapvinsPhoneButton:hover{ color:#ffffff; border-color:#e0bd69; background:rgba(255,255,255,.08); } .gapvinsPhoneSymbol{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid #e0bd69; color:#e0bd69; font-size:18px; } .gapvinsPhoneButton small{ display:block; color:rgba(255,255,255,.52); font-size:15px; line-height:1.3; text-align:left; } .gapvinsPhoneButton strong{ display:block; margin-top:2px; color:#ffffff; font-size:18px; line-height:1.3; text-align:left; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1000px){ .gapvinsHeroInner{ grid-template-columns:1fr; gap:55px; } .gapvinsHeroMark{ justify-content:flex-start; } .gapvinsHeroVertical{ left:225px; right:auto; } .gapvinsResearchHeader{ grid-template-columns:1fr; gap:20px; } .gapvinsArticleGrid{ grid-template-columns: repeat(2,1fr); } .gapvinsKnowledgeInner{ grid-template-columns:80px minmax(0,1fr); } .gapvinsKnowledgeButton{ grid-column:2; justify-self:start; } .gapvinsCTAInner{ flex-direction:column; align-items:flex-start; } .gapvinsCTAActions{ width:100%; max-width:400px; flex-direction:row; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px){ .gapvinsHero{ padding:65px 17px 70px; } .gapvinsHero h1{ font-size:43px; line-height:1.04; letter-spacing:-1.4px; } .gapvinsHeroContent > p{ font-size:16px; line-height:1.8; } .gapvinsHeroMeta{ flex-direction:column; } .gapvinsHeroMeta span, .gapvinsHeroMeta span:first-child{ width:100%; padding:14px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gapvinsHeroMeta span:last-child{ border-bottom:0; } .gapvinsHeroMarkOuter{ width:190px; height:190px; } .gapvinsHeroMarkInner{ width:155px; height:155px; } .gapvinsHeroMarkInner span{ font-size:35px; } .gapvinsHeroVertical{ left:190px; font-size:15px; } /* INTRO */ .gapvinsIntro{ padding:65px 17px; } .gapvinsIntroGrid{ grid-template-columns:1fr; gap:25px; } .gapvinsIntroLabel{ min-height:auto; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid rgba(9,47,98,.14); padding-bottom:15px; } .gapvinsIntroLabel strong{ font-size:45px; } .gapvinsIntroContent h2{ font-size:35px; } /* RESEARCH */ .gapvinsResearch{ padding:70px 17px; } .gapvinsResearchHeader h2{ font-size:38px; } .gapvinsArticleGrid{ grid-template-columns:1fr; } .gapvinsArticleCard{ min-height:430px; padding:25px 22px; } .gapvinsArticleBody h3{ font-size:25px; } /* KNOWLEDGE */ .gapvinsKnowledge{ padding:50px 17px; } .gapvinsKnowledgeInner{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:27px 22px; } .gapvinsKnowledgeNumber{ font-size:55px; } .gapvinsKnowledgeText h2{ font-size:28px; } .gapvinsKnowledgeButton{ width:100%; } /* CTA */ .gapvinsCTA{ padding:65px 17px; } .gapvinsCTAInner{ padding:30px 20px; gap:30px; } .gapvinsCTAContent h2{ font-size:33px; } .gapvinsCTAActions{ width:100%; max-width:none; flex-direction:column; } .gapvinsPrimaryButton, .gapvinsPhoneButton{ width:100%; } } /* ========================================================= VERY SMALL DEVICES ========================================================= */ @media (max-width:390px){ .gapvinsHero h1{ font-size:39px; } .gapvinsHeroMarkOuter{ width:175px; height:175px; } .gapvinsHeroMarkInner{ width:143px; height:143px; } .gapvinsHeroVertical{ left:174px; } } /* ========================================================= CA-FACING SERVICE MODEL UNIQUE NAMESPACE: cafsv- ROYAL NAVY + GOLD ========================================================= */ .cafsv-container { width: min(1180px, 92%); margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .cafsv-hero { position: relative; padding: 95px 0 90px; background: radial-gradient(circle at 85% 20%, rgba(212,168,67,0.14), transparent 28%), linear-gradient(135deg, #071c38 0%, #0b2d55 58%, #123d6c 100%); overflow: hidden; } .cafsv-hero:after { content: ""; position: absolute; width: 360px; height: 360px; right: -150px; bottom: -180px; border: 1px solid rgba(220,177,72,0.25); border-radius: 50%; } .cafsv-hero-content { position: relative; z-index: 2; max-width: 920px; } .cafsv-eyebrow { display: inline-block; margin-bottom: 18px; padding: 8px 16px; border: 1px solid rgba(220,177,72,0.55); border-radius: 30px; color: #e3bd65; font-size: 15px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } .cafsv-hero h1 { margin: 0 0 24px; color: #ffffff; font-size: clamp(38px, 5vw, 66px); line-height: 1.08; font-weight: 700; letter-spacing: -1.5px; } .cafsv-hero h1 strong { color: #e2b94f; } .cafsv-hero-text { max-width: 820px; margin: 0 0 28px; color: #e7edf5; font-size: 19px; line-height: 1.75; } .cafsv-hero-text strong { color: #ffffff; } .cafsv-hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 35px; } .cafsv-hero-points span { padding: 10px 15px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); border-radius: 5px; color: #ffffff; font-size: 15px; } .cafsv-hero-points b { color: #e5bf62; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .cafsv-primary-btn, .cafsv-call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 58px; padding: 14px 25px; background: linear-gradient(135deg, #d5a936, #f0cc70); border: 1px solid #f6d985; border-radius: 6px; color: #071c38; text-decoration: none; font-size: 16px; font-weight: 800; box-shadow: 0 12px 30px rgba(0,0,0,0.22); transition: all 0.25s ease; } .cafsv-primary-btn strong, .cafsv-call-btn strong { padding-left: 16px; border-left: 1px solid rgba(7,28,56,0.35); font-size: 16px; } .cafsv-primary-btn:hover, .cafsv-call-btn:hover { transform: translateY(-3px); background: #ffffff; color: #092f62; } /* ========================================================= COMMON HEADINGS ========================================================= */ .cafsv-section-heading { max-width: 780px; margin: 0 auto 55px; text-align: center; } .cafsv-section-label { display: inline-block; margin-bottom: 12px; color: #b1872f; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .cafsv-section-heading h2, .cafsv-brief-intro h2 { margin: 0 0 18px; color: #092f62; font-size: clamp(30px, 4vw, 45px); line-height: 1.18; } .cafsv-section-heading h2 strong, .cafsv-brief-intro h2 strong { color: #b1872f; } .cafsv-section-heading p, .cafsv-brief-intro p { margin: 0; color: #4d5b6d; font-size: 17px; line-height: 1.75; } /* ========================================================= CONTEXT SECTION ========================================================= */ .cafsv-context { padding: 90px 0; background: #f8f8f6; } .cafsv-context-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cafsv-context-card { position: relative; min-height: 225px; padding: 30px; background: #ffffff; border: 1px solid #e6e0d1; border-radius: 8px; box-shadow: 0 8px 28px rgba(9,47,98,0.06); transition: all 0.25s ease; } .cafsv-context-card:hover { transform: translateY(-5px); border-color: #d6b45b; box-shadow: 0 15px 35px rgba(9,47,98,0.11); } .cafsv-card-number { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-bottom: 20px; background: #092f62; border-radius: 50%; color: #e5bd60; font-size: 15px; font-weight: 800; } .cafsv-context-card h3 { margin: 0 0 12px; color: #092f62; font-size: 21px; } .cafsv-context-card p { margin: 0; color: #566273; font-size: 15px; line-height: 1.7; } .cafsv-context-card p strong { color: #092f62; } /* ========================================================= CA BRIEF ========================================================= */ .cafsv-brief { padding: 100px 0; background: #ffffff; } .cafsv-brief-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; align-items: start; } .cafsv-brief-intro { position: sticky; top: 30px; } .cafsv-brief-list { border-top: 1px solid #ded7c6; } .cafsv-brief-row { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid #ded7c6; } .cafsv-brief-icon { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; background: #092f62; border-radius: 5px; color: #e3bb58; font-size: 15px; font-weight: 800; } .cafsv-brief-row h3 { margin: 0 0 7px; color: #092f62; font-size: 20px; } .cafsv-brief-row p { margin: 0; color: #586576; font-size: 15px; line-height: 1.7; } .cafsv-brief-row strong { color: #092f62; } .cafsv-outline-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 22px; border: 1px solid #b1872f; border-radius: 5px; color: #092f62; text-decoration: none; font-size: 15px; font-weight: 800; transition: all 0.25s ease; } .cafsv-outline-btn span { color: #b1872f; font-size: 20px; } .cafsv-outline-btn:hover { background: #092f62; color: #ffffff; } /* ========================================================= TURNAROUND ========================================================= */ .cafsv-turnaround { position: relative; padding: 95px 0; background: radial-gradient(circle at 10% 90%, rgba(224,184,82,0.12), transparent 28%), linear-gradient(135deg, #071c38, #092f62); } .cafsv-heading-light h2 { color: #ffffff; } .cafsv-heading-light h2 strong { color: #e2bb5c; } .cafsv-heading-light p { color: #dce5ef; } .cafsv-heading-light .cafsv-section-label { color: #e1bc60; } .cafsv-timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cafsv-timeline-card { min-height: 225px; padding: 25px; background: rgba(255,255,255,0.055); border: 1px solid rgba(226,187,92,0.24); border-radius: 7px; transition: all 0.25s ease; } .cafsv-timeline-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.09); border-color: rgba(226,187,92,0.65); } .cafsv-timeline-card > span { color: #dcb85a; font-size: 15px; font-weight: 800; } .cafsv-timeline-card h3 { margin: 18px 0 9px; color: #ffffff; font-size: 19px; line-height: 1.35; } .cafsv-timeline-card p { min-height: 45px; margin: 0 0 17px; color: #bfcddd; font-size: 15px; line-height: 1.5; } .cafsv-timeline-card > strong { color: #e6c467; font-size: 16px; } .cafsv-timeline-featured { grid-column: span 2; background: linear-gradient( 135deg, rgba(214,171,61,0.16), rgba(255,255,255,0.06) ); border-color: rgba(229,193,102,0.55); } /* ========================================================= FINAL CTA ========================================================= */ .cafsv-final-cta { padding: 90px 0; background: #f5f2ea; } .cafsv-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 55px 60px; background: linear-gradient(135deg, #092f62 0%, #071c38 100%); border-radius: 12px; box-shadow: 0 20px 50px rgba(7,28,56,0.18); } .cafsv-cta-content { max-width: 700px; } .cafsv-cta-content .cafsv-section-label { color: #e0b95b; } .cafsv-cta-content h2 { margin: 0 0 16px; color: #ffffff; font-size: clamp(29px, 4vw, 43px); line-height: 1.2; } .cafsv-cta-content h2 strong { color: #e2bc5e; } .cafsv-cta-content p { margin: 0; color: #dce5ef; font-size: 16px; line-height: 1.75; } .cafsv-cta-content p strong { color: #ffffff; } .cafsv-cta-action { min-width: 270px; text-align: center; } .cafsv-call-btn { width: 100%; box-sizing: border-box; } .cafsv-cta-action small { display: block; margin-top: 14px; color: #bfcddd; font-size: 15px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { .cafsv-context-grid { grid-template-columns: repeat(2, 1fr); } .cafsv-brief-layout { grid-template-columns: 1fr; gap: 45px; } .cafsv-brief-intro { position: static; } .cafsv-timeline-grid { grid-template-columns: repeat(2, 1fr); } .cafsv-timeline-featured { grid-column: span 2; } .cafsv-cta-box { flex-direction: column; align-items: flex-start; } .cafsv-cta-action { width: 100%; max-width: 360px; } } @media (max-width: 767px) { .cafsv-hero { padding: 70px 0; } .cafsv-hero h1 { font-size: 38px; } .cafsv-hero-text { font-size: 16px; } .cafsv-primary-btn, .cafsv-call-btn { flex-direction: column; gap: 7px; width: 100%; } .cafsv-primary-btn strong, .cafsv-call-btn strong { padding-left: 0; border-left: 0; } .cafsv-context, .cafsv-brief, .cafsv-turnaround, .cafsv-final-cta { padding: 70px 0; } .cafsv-context-grid, .cafsv-timeline-grid { grid-template-columns: 1fr; } .cafsv-timeline-featured { grid-column: span 1; } .cafsv-cta-box { padding: 38px 25px; } .cafsv-brief-row { grid-template-columns: 44px 1fr; gap: 13px; } } /* ========================================================= GLOBAL / CONTAINER ========================================================= */ .gpvfs-container { width: min(1180px, 92%); margin: 0 auto; } .gpvfs-hero, .gpvfs-selector, .gpvfs-detail, .gpvfs-bank, .gpvfs-leasehold, .gpvfs-final-cta { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvfs-hero *, .gpvfs-selector *, .gpvfs-detail *, .gpvfs-bank *, .gpvfs-leasehold *, .gpvfs-final-cta * { box-sizing: border-box; } .gpvfs-hero strong, .gpvfs-selector strong, .gpvfs-detail strong, .gpvfs-bank strong, .gpvfs-leasehold strong, .gpvfs-final-cta strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .gpvfs-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 20%, rgba(245,158,11,.14), transparent 30%), linear-gradient(135deg, #061a38 0%, #0b2f61 55%, #071d3d 100%); color: #ffffff; padding: 105px 0 90px; } .gpvfs-hero:before { content: ""; position: absolute; width: 360px; height: 360px; right: -150px; top: -170px; border: 1px solid rgba(245,158,11,.25); border-radius: 50%; } .gpvfs-hero:after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -110px; border: 1px solid rgba(245,158,11,.16); border-radius: 50%; } .gpvfs-hero-inner { position: relative; z-index: 2; max-width: 900px; } .gpvfs-eyebrow, .gpvfs-kicker { display: inline-block; color: #f59e0b; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .gpvfs-hero h1 { margin: 18px 0 24px; max-width: 900px; font-size: clamp(40px, 5vw, 66px); line-height: 1.08; letter-spacing: -1.8px; font-weight: 700; } .gpvfs-hero h1 strong { color: #fbbf24; } .gpvfs-hero-intro { max-width: 790px; margin: 0 0 32px; color: #dbe7f5; font-size: 19px; line-height: 1.8; } .gpvfs-hero-trust { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; } .gpvfs-hero-trust span { padding: 9px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 50px; color: #eef5ff; background: rgba(255,255,255,.05); font-size: 15px; } /* ========================================================= CTA BUTTON ========================================================= */ .gpvfs-main-cta, .gpvfs-outline-cta { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 54px; padding: 14px 25px; border-radius: 7px; text-decoration: none !important; font-size: 16px; font-weight: 800; letter-spacing: .2px; transition: all .25s ease; } .gpvfs-main-cta { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #071d3d !important; box-shadow: 0 10px 25px rgba(245,158,11,.22); } .gpvfs-main-cta:hover { background: #ffffff; color: #071d3d !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.18); } .gpvfs-main-cta span, .gpvfs-outline-cta span { font-size: 20px; line-height: 1; } .gpvfs-outline-cta { border: 2px solid #d99a16; color: #0b2f61 !important; background: #ffffff; } .gpvfs-outline-cta:hover { background: #0b2f61; border-color: #0b2f61; color: #ffffff !important; transform: translateY(-2px); } /* ========================================================= SECTION HEADING ========================================================= */ .gpvfs-section-heading { max-width: 780px; margin: 0 auto 55px; text-align: center; } .gpvfs-section-heading h2 { margin: 12px 0 17px; color: #092f62; font-size: clamp(30px, 4vw, 45px); line-height: 1.18; font-weight: 700; } .gpvfs-section-heading h2 strong { color: #b97800; } .gpvfs-section-heading p { margin: 0; color: #53657b; font-size: 17px; } /* ========================================================= SITUATION SELECTOR ========================================================= */ .gpvfs-selector { padding: 95px 0; background: #f8fbff; } .gpvfs-situation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .gpvfs-situation-card { position: relative; display: flex; gap: 22px; padding: 30px; background: #ffffff; border: 1px solid #dce6f2; border-radius: 14px; box-shadow: 0 8px 30px rgba(9,47,98,.06); transition: all .3s ease; } .gpvfs-situation-card:hover { transform: translateY(-5px); border-color: #e0a52a; box-shadow: 0 18px 40px rgba(9,47,98,.11); } .gpvfs-card-featured { border-top: 4px solid #d99a16; } .gpvfs-card-number { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #092f62; color: #fbbf24; font-size: 16px; font-weight: 800; } .gpvfs-card-label { color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvfs-card-content h3 { margin: 7px 0 10px; color: #092f62; font-size: 25px; line-height: 1.25; } .gpvfs-card-content p { margin: 0 0 17px; color: #58697d; font-size: 16px; } .gpvfs-card-link { display: inline-flex; gap: 8px; align-items: center; color: #092f62 !important; font-size: 15px; font-weight: 800; text-decoration: none !important; } .gpvfs-card-link:hover { color: #b97800 !important; } /* ========================================================= DETAIL SECTIONS ========================================================= */ .gpvfs-detail { padding: 100px 0; background: #092f62; color: #ffffff; } .gpvfs-detail.gpvfs-light { background: #ffffff; color: #24364d; } .gpvfs-detail-grid { display: grid; grid-template-columns: 190px 1fr; gap: 65px; align-items: start; } .gpvfs-detail-grid.gpvfs-reverse { grid-template-columns: 1fr 190px; } .gpvfs-detail-grid.gpvfs-reverse .gpvfs-detail-index { order: 2; } .gpvfs-detail-index { position: sticky; top: 40px; padding-top: 5px; } .gpvfs-detail-index span { display: block; color: #fbbf24; font-size: 48px; line-height: 1; font-weight: 800; } .gpvfs-detail-index small { display: block; margin-top: 10px; color: #b8cce4; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvfs-detail-content { max-width: 850px; } .gpvfs-detail-content h2 { margin: 13px 0 23px; color: #ffffff; font-size: clamp(31px, 4vw, 48px); line-height: 1.15; } .gpvfs-light .gpvfs-detail-content h2 { color: #092f62; } .gpvfs-detail-content h2 strong { color: #fbbf24; } .gpvfs-light .gpvfs-detail-content h2 strong { color: #b97800; } .gpvfs-detail-content p { margin: 0 0 19px; color: #d9e6f4; font-size: 17px; line-height: 1.85; } .gpvfs-light .gpvfs-detail-content p { color: #53657b; } .gpvfs-detail-content strong { color: #fbbf24; } .gpvfs-light .gpvfs-detail-content strong { color: #092f62; } /* ========================================================= INFO BOX ========================================================= */ .gpvfs-info-box { margin: 30px 0; padding: 25px 28px; border-left: 4px solid #f59e0b; background: rgba(255,255,255,.07); border-radius: 0 10px 10px 0; } .gpvfs-info-box strong { color: #fbbf24 !important; font-size: 19px; } .gpvfs-info-box p { margin: 7px 0 0; font-size: 16px; } /* ========================================================= PRE-2001 ========================================================= */ .gpvfs-pre2001 { background: linear-gradient(135deg, #071d3d 0%, #092f62 100%); } .gpvfs-highlight-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px 0; } .gpvfs-highlight-row div { padding: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.05); } .gpvfs-highlight-row strong { display: block; color: #fbbf24 !important; font-size: 24px; } .gpvfs-highlight-row span { display: block; margin-top: 5px; color: #d8e5f4; font-size: 15px; } /* ========================================================= BANK / MORTGAGE ========================================================= */ .gpvfs-bank { padding: 100px 0; background: #f4f7fb; } .gpvfs-bank-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; padding: 55px; border-radius: 18px; background: #092f62; box-shadow: 0 20px 55px rgba(9,47,98,.16); } .gpvfs-bank-heading h2 { margin: 13px 0 0; color: #ffffff; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; } .gpvfs-bank-heading h2 strong { color: #fbbf24; } .gpvfs-bank-content p { margin: 0 0 20px; color: #dce8f5; font-size: 17px; line-height: 1.85; } .gpvfs-bank-content strong { color: #fbbf24; } /* ========================================================= GIFT / INHERITANCE ========================================================= */ .gpvfs-gift { background: #ffffff; } .gpvfs-gift .gpvfs-detail-content h2 { color: #092f62; } .gpvfs-gift .gpvfs-detail-content p { color: #53657b; } .gpvfs-gift .gpvfs-detail-content strong { color: #092f62; } /* ========================================================= SARFAESI ========================================================= */ .gpvfs-sarfaesi { background: linear-gradient(135deg, #071d3d, #0b2f61); } /* ========================================================= DDA LEASEHOLD ========================================================= */ .gpvfs-leasehold { padding: 100px 0; background: radial-gradient(circle at 10% 50%, rgba(245,158,11,.12), transparent 30%), #f8fbff; } .gpvfs-leasehold-inner { max-width: 850px; margin: auto; text-align: center; } .gpvfs-leasehold-inner h2 { margin: 14px 0 20px; color: #092f62; font-size: clamp(32px, 4vw, 50px); line-height: 1.15; } .gpvfs-leasehold-inner h2 strong { color: #b97800; } .gpvfs-leasehold-inner p { max-width: 760px; margin: 0 auto 30px; color: #53657b; font-size: 17px; line-height: 1.85; } /* ========================================================= NRI ========================================================= */ .gpvfs-nri { background: linear-gradient(135deg, #092f62 0%, #061a38 100%); } /* ========================================================= FINAL CTA ========================================================= */ .gpvfs-final-cta { padding: 105px 0; background: radial-gradient(circle at 50% 0%, rgba(245,158,11,.18), transparent 35%), #061a38; color: #ffffff; text-align: center; } .gpvfs-final-inner { max-width: 800px; margin: 0 auto; } .gpvfs-final-inner h2 { margin: 14px 0 18px; color: #ffffff; font-size: clamp(36px, 5vw, 58px); line-height: 1.1; } .gpvfs-final-inner h2 strong { color: #fbbf24; } .gpvfs-final-inner p { margin: 0 auto 30px; max-width: 720px; color: #d9e6f4; font-size: 18px; line-height: 1.8; } .gpvfs-cta-large { min-height: 60px; padding: 16px 32px; font-size: 17px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .gpvfs-hero { padding: 80px 0 70px; } .gpvfs-situation-grid { grid-template-columns: 1fr; } .gpvfs-detail-grid, .gpvfs-detail-grid.gpvfs-reverse { grid-template-columns: 1fr; gap: 30px; } .gpvfs-detail-grid.gpvfs-reverse .gpvfs-detail-index { order: initial; } .gpvfs-detail-index { position: static; } .gpvfs-bank-panel { grid-template-columns: 1fr; gap: 30px; padding: 38px; } } @media (max-width: 650px) { .gpvfs-hero h1 { font-size: 39px; } .gpvfs-hero-intro { font-size: 17px; } .gpvfs-selector, .gpvfs-detail, .gpvfs-bank, .gpvfs-leasehold, .gpvfs-final-cta { padding: 70px 0; } .gpvfs-situation-card { flex-direction: column; padding: 25px; } .gpvfs-highlight-row { grid-template-columns: 1fr; } .gpvfs-bank-panel { padding: 28px; border-radius: 12px; } .gpvfs-detail-index span { font-size: 40px; } .gpvfs-main-cta, .gpvfs-outline-cta { width: 100%; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS SELLING PROPERTY PAGE ROYAL NAVY + GOLD DESIGN SYSTEM ========================================================= */ .gpvs2-container { width: min(1180px, 92%); margin: 0 auto; } .gpvs2-hero, .gpvs2-certificates, .gpvs2-section, .gpvs2-timing, .gpvs2-checklist, .gpvs2-ca, .gpvs2-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvs2-hero *, .gpvs2-certificates *, .gpvs2-section *, .gpvs2-timing *, .gpvs2-checklist *, .gpvs2-ca *, .gpvs2-final * { box-sizing: border-box; } .gpvs2-hero strong, .gpvs2-certificates strong, .gpvs2-section strong, .gpvs2-timing strong, .gpvs2-checklist strong, .gpvs2-ca strong, .gpvs2-final strong { font-weight: 800; } /* ========================================================= SHARED KICKER ========================================================= */ .gpvs2-kicker { display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.8px; line-height: 1.4; text-transform: uppercase; } /* ========================================================= HERO ========================================================= */ .gpvs2-hero { position: relative; overflow: hidden; padding: 105px 0 0; color: #ffffff; background: radial-gradient( circle at 85% 10%, rgba(185,120,0,.20), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #092f62 58%, #061d3d 100% ); } .gpvs2-hero:before { content: ""; position: absolute; right: -150px; top: -180px; width: 430px; height: 430px; border: 1px solid rgba(217,154,22,.24); border-radius: 50%; } .gpvs2-hero:after { content: ""; position: absolute; right: -80px; top: -110px; width: 290px; height: 290px; border: 1px solid rgba(217,154,22,.15); border-radius: 50%; } .gpvs2-hero-content { position: relative; z-index: 2; max-width: 920px; padding-bottom: 75px; } .gpvs2-eyebrow { display: inline-block; color: #d99a16; font-size: 15px; font-weight: 800; letter-spacing: 2px; } .gpvs2-hero h1 { margin: 18px 0 25px; max-width: 900px; color: #ffffff; font-size: clamp(40px, 5vw, 65px); line-height: 1.08; letter-spacing: -1.8px; } .gpvs2-hero h1 strong { color: #d99a16; } .gpvs2-hero-content p { max-width: 850px; margin: 0 0 18px; color: #dce7f3; font-size: 18px; line-height: 1.85; } .gpvs2-hero-content p strong { color: #f0b429; } /* ========================================================= HERO BOTTOM STRIP ========================================================= */ .gpvs2-hero-bottom { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.14); } .gpvs2-hero-bottom span { padding: 22px 25px; color: #bdcde0; font-size: 15px; border-right: 1px solid rgba(255,255,255,.14); } .gpvs2-hero-bottom span:last-child { border-right: 0; } .gpvs2-hero-bottom strong { display: block; margin-bottom: 3px; color: #d99a16; font-size: 16px; } /* ========================================================= PRIMARY CTA ========================================================= */ .gpvs2-primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; margin-top: 22px; padding: 13px 23px; border: 1px solid #d99a16; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 52%, #f0b429 100% ); color: #061d3d !important; text-decoration: none !important; font-size: 16px; font-weight: 800; line-height: 1.25; box-shadow: 0 12px 28px rgba(185,120,0,.25); transition: .25s ease; } .gpvs2-primary-btn span { white-space: nowrap; } .gpvs2-primary-btn strong { padding-left: 12px; border-left: 1px solid rgba(6,29,61,.30); color: #061d3d !important; font-size: 15px; white-space: nowrap; } .gpvs2-primary-btn i { font-style: normal; font-size: 21px; } .gpvs2-primary-btn:hover { background: linear-gradient( 135deg, #092f62, #061d3d ); color: #ffffff !important; border-color: #b97800; transform: translateY(-2px); box-shadow: 0 16px 35px rgba(4,21,45,.25); } .gpvs2-primary-btn:hover strong { color: #f0b429 !important; border-color: rgba(240,180,41,.35); } /* ========================================================= CERTIFICATES INTRO ========================================================= */ .gpvs2-certificates { padding: 100px 0; background: #f8fbff; } .gpvs2-section-heading { max-width: 800px; margin: 0 auto 55px; text-align: center; } .gpvs2-section-heading h2 { margin: 13px 0 15px; color: #092f62; font-size: clamp(31px, 4vw, 46px); line-height: 1.18; } .gpvs2-section-heading h2 strong { color: #b97800; } .gpvs2-section-heading p { margin: 0; color: #56677a; font-size: 17px; } /* ========================================================= CERTIFICATE CARDS ========================================================= */ .gpvs2-certificate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } .gpvs2-certificate-card { position: relative; padding: 35px; overflow: hidden; border: 1px solid #d9e2ee; border-radius: 15px; background: #ffffff; box-shadow: 0 10px 35px rgba(9,47,98,.07); } .gpvs2-certificate-card:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, #092f62, #b97800 ); } .gpvs2-certificate-featured { border-color: rgba(185,120,0,.45); } .gpvs2-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .gpvs2-card-number { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #092f62; color: #f0b429; font-size: 15px; font-weight: 800; } .gpvs2-card-label { color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; } .gpvs2-certificate-card h3 { margin: 23px 0 12px; color: #092f62; font-size: 28px; line-height: 1.25; } .gpvs2-certificate-card h3 strong { color: #b97800; } .gpvs2-certificate-card p { margin: 0; color: #596a7c; font-size: 16px; } .gpvs2-certificate-card p strong { color: #092f62; } .gpvs2-small-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 23px; padding: 12px 18px; border-radius: 6px; background: #092f62; color: #ffffff !important; text-decoration: none !important; font-size: 15px; font-weight: 800; transition: .25s ease; } .gpvs2-small-btn span { color: #f0b429; font-size: 19px; } .gpvs2-small-btn:hover { background: linear-gradient(135deg, #b97800, #d99a16); color: #061d3d !important; } /* ========================================================= GENERAL DETAIL SECTION ========================================================= */ .gpvs2-section { padding: 105px 0; } .gpvs2-section-navy { color: #ffffff; background: radial-gradient( circle at 90% 30%, rgba(185,120,0,.13), transparent 30% ), linear-gradient( 135deg, #061d3d, #092f62 ); } .gpvs2-section-light { color: #25384c; background: #ffffff; } .gpvs2-content-grid { display: grid; grid-template-columns: 175px 1fr; gap: 65px; align-items: start; } .gpvs2-content-reverse { grid-template-columns: 1fr 175px; } .gpvs2-content-reverse .gpvs2-side-number { order: 2; } .gpvs2-side-number { position: sticky; top: 35px; } .gpvs2-side-number span { display: block; color: #b97800; font-size: 60px; line-height: 1; font-weight: 800; } .gpvs2-side-number small { display: block; margin-top: 10px; color: #092f62; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvs2-section-navy .gpvs2-side-number small { color: #c7d6e7; } .gpvs2-main-content { max-width: 850px; } .gpvs2-main-content h2 { margin: 13px 0 24px; color: #ffffff; font-size: clamp(32px, 4vw, 50px); line-height: 1.14; } .gpvs2-section-light .gpvs2-main-content h2 { color: #092f62; } .gpvs2-main-content h2 strong { color: #d99a16; } .gpvs2-section-light .gpvs2-main-content h2 strong { color: #b97800; } .gpvs2-main-content h3 { margin: 35px 0 13px; color: #ffffff; font-size: 24px; } .gpvs2-section-light .gpvs2-main-content h3 { color: #092f62; } .gpvs2-main-content h3 strong { color: #d99a16; } .gpvs2-main-content p { margin: 0 0 20px; color: #d7e3f0; font-size: 17px; line-height: 1.85; } .gpvs2-section-light .gpvs2-main-content p { color: #596a7c; } .gpvs2-section-navy .gpvs2-main-content p strong { color: #f0b429; } .gpvs2-section-light .gpvs2-main-content p strong { color: #092f62; } /* ========================================================= SECTION 50C EXAMPLE ========================================================= */ .gpvs2-example-box { margin: 32px 0; padding: 28px; border: 1px solid rgba(217,154,22,.32); border-radius: 12px; background: rgba(255,255,255,.06); } .gpvs2-example-heading { margin-bottom: 22px; color: #d99a16; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .gpvs2-example-values { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; } .gpvs2-example-values div:not(.gpvs2-example-arrow) { padding: 20px; border-radius: 9px; background: rgba(255,255,255,.07); } .gpvs2-example-values span { display: block; color: #c7d6e7; font-size: 15px; } .gpvs2-example-values strong { display: block; margin-top: 5px; color: #f0b429; font-size: 27px; } .gpvs2-example-arrow { color: #d99a16; font-size: 15px; font-weight: 800; } .gpvs2-example-box p { margin: 18px 0 0; font-size: 15px; } /* ========================================================= GOLD NOTE ========================================================= */ .gpvs2-gold-note { display: flex; gap: 12px; align-items: flex-start; margin: 30px 0; padding: 20px 22px; border-left: 4px solid #b97800; border-radius: 0 9px 9px 0; background: rgba(185,120,0,.10); } .gpvs2-gold-note strong { color: #f0b429 !important; white-space: nowrap; } .gpvs2-gold-note span { color: #dce7f3; font-size: 15px; } /* ========================================================= RESEARCH PANEL ========================================================= */ .gpvs2-research-panel { margin: 30px 0; padding: 30px; border: 1px solid #e2c27b; border-radius: 12px; background: linear-gradient( 135deg, #fdfaf3, #fff ); } .gpvs2-research-panel > span { color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; } .gpvs2-research-panel h3 { margin: 10px 0 10px; color: #092f62 !important; font-size: 24px; } .gpvs2-research-panel h3 strong { color: #b97800; } .gpvs2-research-panel p { margin: 0; color: #596a7c !important; font-size: 16px; } .gpvs2-external-note { margin-top: 20px; color: #647487; font-size: 15px; } .gpvs2-external-note a { color: #b97800 !important; font-weight: 800; } /* ========================================================= TIMING SECTION ========================================================= */ .gpvs2-timing { padding: 105px 0; color: #ffffff; background: radial-gradient( circle at 10% 20%, rgba(185,120,0,.15), transparent 28% ), #092f62; } .gpvs2-timing-header { max-width: 800px; margin: 0 auto 60px; text-align: center; } .gpvs2-timing-header h2 { margin: 13px 0 17px; color: #ffffff; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; } .gpvs2-timing-header h2 strong { color: #d99a16; } .gpvs2-timing-header p { margin: 0; color: #d7e3f0; font-size: 17px; } .gpvs2-timeline { max-width: 850px; margin: auto; } .gpvs2-timeline-item { display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start; } .gpvs2-timeline-item > span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid #b97800; border-radius: 50%; background: #061d3d; color: #f0b429; font-size: 15px; font-weight: 800; } .gpvs2-timeline-item h3 { margin: 0 0 7px; color: #f0b429; font-size: 22px; } .gpvs2-timeline-item p { margin: 0; color: #d7e3f0; font-size: 16px; } .gpvs2-timeline-line { width: 1px; height: 40px; margin: 5px 0 5px 26px; background: linear-gradient( to bottom, #b97800, rgba(185,120,0,.1) ); } .gpvs2-timing-btn { display: flex; width: fit-content; margin: 45px auto 0; } /* ========================================================= CHECKLIST ========================================================= */ .gpvs2-checklist { padding: 105px 0; background: #f8fbff; } .gpvs2-checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .gpvs2-check-card { position: relative; padding: 30px; border: 1px solid #d9e2ee; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 30px rgba(9,47,98,.05); } .gpvs2-check-card > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 50%; background: #092f62; color: #f0b429; font-size: 15px; font-weight: 800; } .gpvs2-check-card h3 { margin: 0 0 10px; color: #092f62; font-size: 22px; line-height: 1.3; } .gpvs2-check-card h3 strong { color: #b97800; } .gpvs2-check-card p { margin: 0; color: #596a7c; font-size: 16px; } /* ========================================================= CA SECTION ========================================================= */ .gpvs2-ca { padding: 85px 0; background: #ffffff; } .gpvs2-ca-panel { display: grid; grid-template-columns: 1fr auto; gap: 45px; align-items: center; padding: 50px; border-radius: 15px; background: linear-gradient( 135deg, #061d3d, #092f62 ); box-shadow: 0 18px 50px rgba(9,47,98,.16); } .gpvs2-ca-panel h2 { margin: 13px 0 15px; color: #ffffff; font-size: clamp(30px, 4vw, 43px); line-height: 1.15; } .gpvs2-ca-panel h2 strong { color: #d99a16; } .gpvs2-ca-panel p { max-width: 730px; margin: 0; color: #d8e4f0; font-size: 16px; } /* ========================================================= FINAL CTA ========================================================= */ .gpvs2-final { padding: 105px 0; text-align: center; color: #ffffff; background: radial-gradient( circle at 50% 0%, rgba(185,120,0,.22), transparent 38% ), linear-gradient( 135deg, #04152d, #092f62 ); } .gpvs2-final-inner { max-width: 850px; margin: auto; } .gpvs2-final h2 { margin: 14px 0 18px; color: #ffffff; font-size: clamp(36px, 5vw, 57px); line-height: 1.1; } .gpvs2-final h2 strong { color: #d99a16; } .gpvs2-final p { max-width: 760px; margin: 0 auto; color: #d8e4f0; font-size: 18px; } .gpvs2-final-btn { margin-top: 30px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .gpvs2-content-grid, .gpvs2-content-reverse { grid-template-columns: 1fr; gap: 30px; } .gpvs2-content-reverse .gpvs2-side-number { order: initial; } .gpvs2-side-number { position: static; } .gpvs2-side-number span { font-size: 48px; } .gpvs2-ca-panel { grid-template-columns: 1fr; } } @media (max-width: 700px) { .gpvs2-hero { padding-top: 75px; } .gpvs2-hero-bottom { grid-template-columns: 1fr; } .gpvs2-hero-bottom span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); } .gpvs2-hero-bottom span:last-child { border-bottom: 0; } .gpvs2-certificate-grid, .gpvs2-checklist-grid { grid-template-columns: 1fr; } .gpvs2-example-values { grid-template-columns: 1fr; } .gpvs2-example-arrow { text-align: center; } .gpvs2-gold-note { flex-direction: column; } .gpvs2-ca-panel { padding: 30px; } .gpvs2-primary-btn { flex-wrap: wrap; width: 100%; } .gpvs2-primary-btn strong { border-left: 0; padding-left: 0; } .gpvs2-timing-btn { width: 100%; } } @media (max-width: 480px) { .gpvs2-container { width: 90%; } .gpvs2-hero h1 { font-size: 38px; } .gpvs2-hero-content p { font-size: 16px; } .gpvs2-section, .gpvs2-certificates, .gpvs2-timing, .gpvs2-checklist, .gpvs2-ca, .gpvs2-final { padding: 75px 0; } .gpvs2-certificate-card, .gpvs2-check-card { padding: 25px; } .gpvs2-primary-btn { min-height: 56px; padding: 12px 17px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS SECTION 50C — ROYAL NAVY + GOLD ========================================================= */ .gpc50-container { width: min(1180px, 92%); margin: 0 auto; } .gpc50-hero, .gpc50-scenario, .gpc50-challenge, .gpc50-certificate, .gpc50-before-sale, .gpc50-late, .gpc50-final-cta { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpc50-hero *, .gpc50-scenario *, .gpc50-challenge *, .gpc50-certificate *, .gpc50-before-sale *, .gpc50-late *, .gpc50-final-cta * { box-sizing: border-box; } /* ========================================================= HERO ========================================================= */ .gpc50-hero { position: relative; overflow: hidden; padding: 105px 0 95px; color: #ffffff; background: radial-gradient( circle at 85% 15%, rgba(185,120,0,.25), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #092f62 58%, #061d3d 100% ); } .gpc50-hero:before { content: ""; position: absolute; width: 420px; height: 420px; right: -190px; top: -190px; border: 1px solid rgba(185,120,0,.30); border-radius: 50%; } .gpc50-hero:after { content: ""; position: absolute; width: 300px; height: 300px; right: -130px; top: -130px; border: 1px solid rgba(240,180,41,.18); border-radius: 50%; } .gpc50-hero-content { position: relative; z-index: 2; max-width: 900px; } .gpc50-eyebrow, .gpc50-kicker { display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .gpc50-hero .gpc50-eyebrow { color: #f0b429; } .gpc50-hero h1 { margin: 17px 0 25px; max-width: 900px; color: #ffffff; font-size: clamp(40px, 5.5vw, 67px); line-height: 1.07; letter-spacing: -1.8px; font-weight: 700; } .gpc50-hero h1 strong { color: #f0b429; } .gpc50-hero-content > p { max-width: 790px; margin: 0 0 32px; color: #dce7f4; font-size: 19px; line-height: 1.8; } .gpc50-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; } .gpc50-hero-badges span { padding: 8px 14px; border: 1px solid rgba(185,120,0,.45); border-radius: 50px; background: rgba(255,255,255,.045); color: #f4e3bd; font-size: 15px; } /* ========================================================= CTA BUTTONS ========================================================= */ .gpc50-primary-cta, .gpc50-final-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 56px; padding: 15px 28px; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 50%, #f0b429 100% ); color: #061d3d !important; font-size: 16px; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 30px rgba(185,120,0,.25); transition: all .25s ease; } .gpc50-primary-cta:hover, .gpc50-final-button:hover { background: linear-gradient( 135deg, #f0b429, #d99a16, #b97800 ); color: #04152d !important; transform: translateY(-3px); box-shadow: 0 17px 35px rgba(185,120,0,.32); } .gpc50-primary-cta span, .gpc50-final-button span { font-size: 20px; line-height: 1; } /* ========================================================= SECTION HEADING ========================================================= */ .gpc50-section-heading { max-width: 820px; margin: 0 auto 52px; text-align: center; } .gpc50-section-heading h2 { margin: 12px 0 18px; color: #092f62; font-size: clamp(31px, 4vw, 48px); line-height: 1.16; font-weight: 700; } .gpc50-section-heading h2 strong { color: #b97800; } .gpc50-section-heading > p { margin: 0 auto; max-width: 760px; color: #56687c; font-size: 17px; } /* ========================================================= SELLER SCENARIO ========================================================= */ .gpc50-scenario { padding: 95px 0; background: #f8fbff; } .gpc50-scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .gpc50-scenario-card { padding: 32px 27px; border: 1px solid #d9e2ee; border-top: 4px solid #092f62; border-radius: 12px; background: #ffffff; box-shadow: 0 9px 28px rgba(9,47,98,.06); } .gpc50-scenario-gold { border-top-color: #b97800; } .gpc50-scenario-risk { border-top-color: #061d3d; } .gpc50-scenario-label { display: block; margin-bottom: 10px; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.3px; } .gpc50-scenario-card > strong { display: block; color: #092f62; font-size: 35px; line-height: 1.15; } .gpc50-scenario-card p { margin: 13px 0 0; color: #5a6b7d; font-size: 16px; } .gpc50-scenario-explanation { max-width: 900px; margin: 38px auto 0; padding: 30px 34px; border-left: 4px solid #b97800; background: #ffffff; box-shadow: 0 10px 30px rgba(9,47,98,.06); } .gpc50-scenario-explanation p { margin: 0 0 15px; color: #53657a; font-size: 17px; } .gpc50-scenario-explanation p:last-child { margin-bottom: 0; } .gpc50-scenario-explanation strong { color: #092f62; } /* ========================================================= SECTION 50C(2) CHALLENGE ========================================================= */ .gpc50-challenge { padding: 100px 0; color: #ffffff; background: linear-gradient( 135deg, #04152d 0%, #092f62 60%, #061d3d 100% ); } .gpc50-challenge-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: start; } .gpc50-challenge-intro { position: sticky; top: 35px; } .gpc50-challenge-intro h2 { margin: 13px 0 20px; color: #ffffff; font-size: clamp(33px, 4vw, 49px); line-height: 1.13; } .gpc50-challenge-intro h2 strong { color: #f0b429; } .gpc50-challenge-intro p { margin: 0; color: #d6e3f1; font-size: 17px; } .gpc50-steps { display: grid; gap: 16px; } .gpc50-step { display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 25px; border: 1px solid rgba(185,120,0,.30); border-radius: 12px; background: rgba(255,255,255,.055); } .gpc50-step-number { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #b97800, #f0b429); color: #061d3d; font-size: 15px; font-weight: 900; } .gpc50-step h3 { margin: 2px 0 7px; color: #ffffff; font-size: 21px; } .gpc50-step p { margin: 0; color: #cfdeed; font-size: 16px; } .gpc50-step strong { color: #f0b429; } /* ========================================================= FMV CERTIFICATE ========================================================= */ .gpc50-certificate { padding: 95px 0; background: #ffffff; } .gpc50-certificate-panel { display: grid; grid-template-columns: 160px 1fr; gap: 50px; align-items: center; padding: 55px; border-radius: 16px; background: linear-gradient( 135deg, #061d3d 0%, #092f62 72%, #b97800 180% ); box-shadow: 0 20px 55px rgba(9,47,98,.16); } .gpc50-certificate-mark { display: flex; align-items: center; justify-content: center; width: 145px; height: 145px; border: 2px solid #b97800; border-radius: 50%; background: rgba(185,120,0,.10); color: #f0b429; font-size: 27px; font-weight: 900; letter-spacing: 1px; } .gpc50-certificate-content h2 { margin: 12px 0 20px; color: #ffffff; font-size: clamp(31px, 4vw, 47px); line-height: 1.15; } .gpc50-certificate-content h2 strong { color: #f0b429; } .gpc50-certificate-content p { margin: 0 0 17px; color: #d8e5f2; font-size: 17px; } .gpc50-certificate-content p strong { color: #f0b429; } /* ========================================================= BEFORE SALE ========================================================= */ .gpc50-before-sale { padding: 100px 0; background: #f8fbff; } .gpc50-timing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .gpc50-timing-card { position: relative; padding: 35px 28px 30px; border: 1px solid #d9e2ee; border-radius: 13px; background: #ffffff; box-shadow: 0 9px 30px rgba(9,47,98,.055); overflow: hidden; } .gpc50-timing-card:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #092f62, #b97800); } .gpc50-timing-number { display: block; color: #b97800; font-size: 27px; font-weight: 900; } .gpc50-timing-card h3 { margin: 8px 0 10px; color: #092f62; font-size: 22px; } .gpc50-timing-card p { margin: 0; color: #596a7d; font-size: 16px; } .gpc50-timing-card strong { color: #092f62; } /* ========================================================= LATE CERTIFICATE ========================================================= */ .gpc50-late { padding: 100px 0; background: radial-gradient( circle at 85% 50%, rgba(185,120,0,.13), transparent 30% ), #ffffff; } .gpc50-late-grid { display: grid; grid-template-columns: 190px 1fr; gap: 65px; align-items: start; } .gpc50-late-number { padding-top: 8px; } .gpc50-late-number span { display: block; color: #092f62; font-size: 52px; line-height: 1; font-weight: 900; } .gpc50-late-number small { display: block; margin-top: 8px; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpc50-late-content { max-width: 850px; } .gpc50-late-content h2 { margin: 12px 0 21px; color: #092f62; font-size: clamp(32px, 4vw, 49px); line-height: 1.14; } .gpc50-late-content h2 strong { color: #b97800; } .gpc50-late-content p { margin: 0 0 18px; color: #56687a; font-size: 17px; } .gpc50-late-content p strong { color: #092f62; } /* ========================================================= FINAL CTA ========================================================= */ .gpc50-final-cta { padding: 100px 0; text-align: center; color: #ffffff; background: radial-gradient( circle at 50% 0%, rgba(185,120,0,.24), transparent 36% ), linear-gradient( 135deg, #04152d, #092f62 58%, #061d3d ); } .gpc50-final-content { max-width: 820px; margin: 0 auto; } .gpc50-final-content .gpc50-kicker { color: #f0b429; } .gpc50-final-content h2 { margin: 13px 0 19px; color: #ffffff; font-size: clamp(35px, 5vw, 57px); line-height: 1.1; } .gpc50-final-content h2 strong { color: #f0b429; } .gpc50-final-content p { max-width: 720px; margin: 0 auto 30px; color: #d8e5f2; font-size: 18px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 950px) { .gpc50-challenge-layout { grid-template-columns: 1fr; gap: 45px; } .gpc50-challenge-intro { position: static; } .gpc50-certificate-panel { grid-template-columns: 1fr; text-align: center; } .gpc50-certificate-mark { margin: 0 auto; } .gpc50-late-grid { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 760px) { .gpc50-hero, .gpc50-scenario, .gpc50-challenge, .gpc50-certificate, .gpc50-before-sale, .gpc50-late, .gpc50-final-cta { padding: 72px 0; } .gpc50-scenario-grid, .gpc50-timing-grid { grid-template-columns: 1fr; } .gpc50-certificate-panel { padding: 32px 25px; } .gpc50-step { grid-template-columns: 1fr; } .gpc50-step-number { width: 48px; height: 48px; } } @media (max-width: 520px) { .gpc50-hero h1 { font-size: 38px; } .gpc50-hero-content > p { font-size: 17px; } .gpc50-primary-cta, .gpc50-final-button { width: 100%; } .gpc50-scenario-explanation { padding: 23px; } } /* ========================================================= PRE-2001 PROPERTY VALUATION ROYAL NAVY + GOLD DESIGN SYSTEM ========================================================= */ .gpvpre-container { width: min(1180px, 92%); margin: 0 auto; } .gpvpre-hero, .gpvpre-scenario, .gpvpre-two-problems, .gpvpre-certificates, .gpvpre-finance, .gpvpre-why, .gpvpre-practice, .gpvpre-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvpre-hero *, .gpvpre-scenario *, .gpvpre-two-problems *, .gpvpre-certificates *, .gpvpre-finance *, .gpvpre-why *, .gpvpre-practice *, .gpvpre-final * { box-sizing: border-box; } .gpvpre-hero strong, .gpvpre-scenario strong, .gpvpre-two-problems strong, .gpvpre-certificates strong, .gpvpre-finance strong, .gpvpre-why strong, .gpvpre-practice strong, .gpvpre-final strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .gpvpre-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient( circle at 88% 15%, rgba(185,120,0,.22), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #092f62 58%, #061d3d 100% ); } .gpvpre-hero:before { content: ""; position: absolute; width: 420px; height: 420px; right: -220px; top: -220px; border: 1px solid rgba(217,154,22,.30); border-radius: 50%; } .gpvpre-hero:after { content: ""; position: absolute; width: 300px; height: 300px; right: -155px; top: -155px; border: 1px solid rgba(217,154,22,.18); border-radius: 50%; } .gpvpre-hero-content { position: relative; z-index: 2; max-width: 900px; } .gpvpre-eyebrow, .gpvpre-kicker { display: inline-block; color: #b97800; font-size: 15px; line-height: 1.4; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .gpvpre-hero .gpvpre-eyebrow { color: #d99a16; } .gpvpre-hero h1 { margin: 18px 0 25px; color: #ffffff; font-size: clamp(40px, 5vw, 65px); line-height: 1.08; letter-spacing: -1.5px; } .gpvpre-hero h1 strong { color: #f0b429; } .gpvpre-hero p { max-width: 820px; margin: 0 0 32px; color: #dce8f5; font-size: 19px; line-height: 1.8; } .gpvpre-hero p strong { color: #f0b429; } /* ========================================================= HERO ACTIONS ========================================================= */ .gpvpre-hero-actions, .gpvpre-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .gpvpre-primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 56px; padding: 14px 27px; border: 0; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 50%, #f0b429 100% ); color: #061d3d !important; font-size: 16px; line-height: 1.3; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 28px rgba(185,120,0,.24); transition: all .25s ease; } .gpvpre-primary-btn:hover { color: #ffffff !important; background: linear-gradient( 135deg, #04152d, #092f62 ); box-shadow: 0 14px 32px rgba(4,21,45,.25); transform: translateY(-2px); } .gpvpre-primary-btn span { font-size: 20px; line-height: 1; } .gpvpre-phone-btn, .gpvpre-call-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 13px 22px; border: 1px solid rgba(240,180,41,.55); border-radius: 7px; color: #f0b429 !important; background: rgba(255,255,255,.05); font-size: 16px; font-weight: 800; text-decoration: none !important; transition: all .25s ease; } .gpvpre-phone-btn span { margin-right: 7px; color: #ffffff; } .gpvpre-phone-btn:hover, .gpvpre-call-btn:hover { background: #b97800; border-color: #b97800; color: #ffffff !important; } /* ========================================================= HERO BADGES ========================================================= */ .gpvpre-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .gpvpre-hero-badges span { padding: 8px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 50px; color: #e3edf7; background: rgba(255,255,255,.045); font-size: 15px; } /* ========================================================= SECTION HEADING ========================================================= */ .gpvpre-section-heading { max-width: 820px; margin: 0 auto 52px; text-align: center; } .gpvpre-section-heading h2 { margin: 12px 0 17px; color: #092f62; font-size: clamp(31px, 4vw, 47px); line-height: 1.15; } .gpvpre-section-heading h2 strong { color: #b97800; } .gpvpre-section-heading p { margin: 0; color: #53677d; font-size: 17px; } /* ========================================================= SCENARIO ========================================================= */ .gpvpre-scenario { padding: 95px 0; background: #f8fbff; } .gpvpre-number-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .gpvpre-number-card { padding: 31px; border: 1px solid #d8e2ee; border-radius: 13px; background: #ffffff; box-shadow: 0 9px 30px rgba(9,47,98,.06); } .gpvpre-number-card.gpvpre-gold-card { border-top: 4px solid #b97800; background: linear-gradient( 145deg, #ffffff 0%, #fffaf0 100% ); } .gpvpre-number-label { display: block; margin-bottom: 8px; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; } .gpvpre-number-card strong { display: block; color: #092f62; font-size: 32px; line-height: 1.2; } .gpvpre-number-card small { display: block; margin-top: 9px; color: #617286; font-size: 15px; } /* ========================================================= TWO PROBLEMS ========================================================= */ .gpvpre-two-problems { padding: 100px 0; background: #ffffff; } .gpvpre-problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } .gpvpre-problem-card { padding: 34px; border: 1px solid #dbe4ee; border-radius: 14px; background: #ffffff; box-shadow: 0 12px 35px rgba(9,47,98,.07); border-top: 4px solid #092f62; } .gpvpre-problem-card:nth-child(2) { border-top-color: #b97800; } .gpvpre-problem-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .gpvpre-problem-number { color: #092f62; font-size: 27px; font-weight: 800; } .gpvpre-problem-tag { padding: 6px 11px; border-radius: 50px; background: #f8f1e4; color: #b97800; font-size: 15px; font-weight: 800; } .gpvpre-problem-card h3 { margin: 19px 0 13px; color: #092f62; font-size: 26px; line-height: 1.25; } .gpvpre-problem-card p { margin: 0 0 22px; color: #53677d; font-size: 16px; } .gpvpre-problem-card p strong { color: #092f62; } .gpvpre-mini-highlight { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; padding: 13px 15px; border-radius: 7px; background: #f8fbff; border: 1px solid #e1e8f0; } .gpvpre-mini-highlight span { color: #5d6d80; font-size: 15px; } .gpvpre-mini-highlight strong { color: #b97800; font-size: 18px; } /* ========================================================= CERTIFICATES ========================================================= */ .gpvpre-certificates { padding: 100px 0; background: linear-gradient( 135deg, #04152d 0%, #092f62 60%, #061d3d 100% ); } .gpvpre-white-heading h2 { color: #ffffff; } .gpvpre-white-heading p { color: #dce8f5; } .gpvpre-white-heading h2 strong { color: #f0b429; } .gpvpre-certificate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } .gpvpre-certificate-card { padding: 35px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.055); box-shadow: 0 15px 40px rgba(0,0,0,.15); } .gpvpre-featured-certificate { border-color: rgba(217,154,22,.58); background: linear-gradient( 145deg, rgba(185,120,0,.13), rgba(255,255,255,.055) ); } .gpvpre-certificate-icon { display: flex; align-items: center; justify-content: center; width: 67px; height: 67px; margin-bottom: 20px; border-radius: 12px; background: linear-gradient( 135deg, #b97800, #f0b429 ); color: #061d3d; font-size: 17px; font-weight: 900; } .gpvpre-certificate-label { color: #d99a16; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvpre-certificate-card h3 { margin: 10px 0 14px; color: #ffffff; font-size: 26px; line-height: 1.25; } .gpvpre-certificate-card p { margin: 0 0 20px; color: #d8e5f2; font-size: 16px; } .gpvpre-certificate-card p strong { color: #f0b429; } .gpvpre-certificate-note { padding: 16px; border-left: 3px solid #b97800; background: rgba(255,255,255,.055); color: #dce8f5; font-size: 15px; } .gpvpre-certificate-note strong { color: #f0b429; } /* ========================================================= FINANCE ACT ========================================================= */ .gpvpre-finance { padding: 100px 0; background: #ffffff; } .gpvpre-finance-grid { display: grid; grid-template-columns: 180px 1fr; gap: 65px; } .gpvpre-finance-number span { display: block; color: #092f62; font-size: 55px; line-height: 1; font-weight: 900; } .gpvpre-finance-number small { display: block; margin-top: 10px; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvpre-finance-content { max-width: 850px; } .gpvpre-finance-content h2 { margin: 12px 0 22px; color: #092f62; font-size: clamp(31px, 4vw, 47px); line-height: 1.15; } .gpvpre-finance-content h2 strong { color: #b97800; } .gpvpre-finance-content p { margin: 0 0 20px; color: #53677d; font-size: 17px; } .gpvpre-finance-content p strong { color: #092f62; } .gpvpre-method-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 30px 0; } .gpvpre-method-box div { padding: 20px; border-radius: 10px; border: 1px solid #dce4ed; background: #f8fbff; } .gpvpre-method-box span { display: block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1px; } .gpvpre-method-box strong { display: block; margin-top: 5px; color: #092f62; font-size: 18px; } .gpvpre-note { font-size: 15px !important; color: #6a7888 !important; } /* ========================================================= WHY SECTION ========================================================= */ .gpvpre-why { padding: 100px 0; background: linear-gradient( 135deg, #061d3d, #092f62 ); color: #ffffff; } .gpvpre-why-inner { display: grid; grid-template-columns: 1fr .8fr; gap: 75px; align-items: center; } .gpvpre-why-content h2 { margin: 13px 0 22px; color: #ffffff; font-size: clamp(32px, 4vw, 50px); line-height: 1.15; } .gpvpre-why-content h2 strong { color: #f0b429; } .gpvpre-why-content p { margin: 0 0 19px; color: #dce8f5; font-size: 17px; } .gpvpre-why-content p strong { color: #f0b429; } .gpvpre-why-content .gpvpre-primary-btn { margin-top: 15px; } .gpvpre-why-points { display: grid; gap: 14px; } .gpvpre-point { padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.05); } .gpvpre-point > span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 50%; background: #b97800; color: #061d3d; font-size: 15px; font-weight: 900; } .gpvpre-point strong { display: block; color: #ffffff; font-size: 18px; } .gpvpre-point p { margin: 5px 0 0; color: #cbd9e7; font-size: 15px; } .gpvpre-point p strong { display: inline; color: #f0b429; font-size: inherit; } /* ========================================================= A2Z VALUERS PRACTICE ========================================================= */ .gpvpre-practice { padding: 100px 0; background: radial-gradient( circle at 90% 20%, rgba(185,120,0,.09), transparent 28% ), #f8fbff; text-align: center; } .gpvpre-practice-inner { max-width: 900px; margin: 0 auto; } .gpvpre-practice h2 { margin: 12px 0 20px; color: #092f62; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; } .gpvpre-practice h2 strong { color: #b97800; } .gpvpre-practice-inner > p { margin: 0 auto 25px; color: #53677d; font-size: 17px; } .gpvpre-practice-inner > p strong { color: #092f62; } .gpvpre-practice-credentials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 35px 0; } .gpvpre-practice-credentials div { padding: 20px 14px; border: 1px solid #dbe4ed; border-radius: 10px; background: #ffffff; } .gpvpre-practice-credentials strong { display: block; color: #b97800; font-size: 19px; } .gpvpre-practice-credentials span { display: block; margin-top: 5px; color: #607083; font-size: 15px; } .gpvpre-engagement { max-width: 780px; } /* ========================================================= FINAL CTA ========================================================= */ .gpvpre-final { position: relative; overflow: hidden; padding: 100px 0; background: radial-gradient( circle at 50% 0%, rgba(185,120,0,.20), transparent 35% ), linear-gradient( 135deg, #04152d, #092f62 ); text-align: center; } .gpvpre-final-inner { max-width: 820px; margin: 0 auto; } .gpvpre-final h2 { margin: 13px 0 18px; color: #ffffff; font-size: clamp(35px, 5vw, 56px); line-height: 1.1; } .gpvpre-final h2 strong { color: #f0b429; } .gpvpre-final p { max-width: 700px; margin: 0 auto 30px; color: #dce8f5; font-size: 18px; } .gpvpre-final-actions { justify-content: center; } .gpvpre-large-btn { min-height: 60px; padding: 16px 32px; font-size: 17px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .gpvpre-number-grid, .gpvpre-certificate-grid { grid-template-columns: 1fr; } .gpvpre-finance-grid { grid-template-columns: 1fr; gap: 30px; } .gpvpre-why-inner { grid-template-columns: 1fr; gap: 45px; } .gpvpre-practice-credentials { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 650px) { .gpvpre-hero, .gpvpre-scenario, .gpvpre-two-problems, .gpvpre-certificates, .gpvpre-finance, .gpvpre-why, .gpvpre-practice, .gpvpre-final { padding: 70px 0; } .gpvpre-hero h1 { font-size: 39px; } .gpvpre-hero p { font-size: 17px; } .gpvpre-problem-grid, .gpvpre-method-box { grid-template-columns: 1fr; } .gpvpre-practice-credentials { grid-template-columns: 1fr 1fr; } .gpvpre-hero-actions, .gpvpre-final-actions { align-items: stretch; flex-direction: column; } .gpvpre-primary-btn, .gpvpre-phone-btn, .gpvpre-call-btn { width: 100%; } .gpvpre-number-card, .gpvpre-problem-card, .gpvpre-certificate-card { padding: 27px; } } @media (max-width: 430px) { .gpvpre-practice-credentials { grid-template-columns: 1fr; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS BUYING PROPERTY PAGE ROYAL NAVY + GOLD SYSTEM ========================================================= */ .gpvbx-container { width: min(1180px, 92%); margin: 0 auto; } .gpvbx-hero, .gpvbx-section, .gpvbx-example, .gpvbx-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvbx-hero *, .gpvbx-section *, .gpvbx-example *, .gpvbx-final * { box-sizing: border-box; } .gpvbx-hero strong, .gpvbx-section strong, .gpvbx-example strong, .gpvbx-final strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .gpvbx-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient( circle at 88% 18%, rgba(185,120,0,.18), transparent 30% ), linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .gpvbx-hero:before { content: ""; position: absolute; width: 400px; height: 400px; right: -180px; top: -210px; border: 1px solid rgba(217,154,22,.3); border-radius: 50%; } .gpvbx-hero:after { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -140px; border: 1px solid rgba(217,154,22,.2); border-radius: 50%; } .gpvbx-hero-content { position: relative; z-index: 2; max-width: 920px; } .gpvbx-eyebrow, .gpvbx-kicker { display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .gpvbx-hero .gpvbx-eyebrow { color: #d99a16; } .gpvbx-hero h1 { max-width: 900px; margin: 18px 0 25px; color: #ffffff; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -1.7px; font-weight: 700; } .gpvbx-hero h1 strong { color: #d99a16; } .gpvbx-hero p { max-width: 800px; margin: 0 0 32px; color: #dce7f3; font-size: 19px; line-height: 1.8; } .gpvbx-hero-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; } .gpvbx-hero-points span { padding: 8px 15px; border: 1px solid rgba(217,154,22,.35); border-radius: 50px; color: #e7edf5; background: rgba(255,255,255,.045); font-size: 15px; } .gpvbx-hero-points strong { color: #d99a16; } /* ========================================================= BUTTON SYSTEM ========================================================= */ .gpvbx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 55px; padding: 14px 27px; border-radius: 7px; text-decoration: none !important; font-size: 16px; font-weight: 800; line-height: 1.3; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .gpvbx-btn span { font-size: 20px; line-height: 1; } .gpvbx-btn-gold { color: #061d3d !important; background: linear-gradient( 135deg, #b97800 0%, #d99a16 52%, #f0b429 100% ); box-shadow: 0 10px 25px rgba(185,120,0,.24); } .gpvbx-btn-gold:hover { color: #061d3d !important; background: linear-gradient( 135deg, #d99a16 0%, #f0b429 55%, #b97800 100% ); transform: translateY(-3px); box-shadow: 0 15px 32px rgba(185,120,0,.32); } .gpvbx-btn-light { color: #092f62 !important; background: #ffffff; border: 2px solid #b97800; } .gpvbx-btn-light:hover { color: #ffffff !important; background: #092f62; border-color: #d99a16; transform: translateY(-3px); } .gpvbx-btn-large { min-height: 60px; padding: 16px 34px; font-size: 17px; } /* ========================================================= COMMON SECTION ========================================================= */ .gpvbx-section { padding: 100px 0; } .gpvbx-section-light { color: #26384d; background: #ffffff; } .gpvbx-section-navy { color: #ffffff; background: radial-gradient( circle at 8% 50%, rgba(185,120,0,.12), transparent 28% ), linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .gpvbx-two-column { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 65px; align-items: start; } .gpvbx-two-column-reverse { grid-template-columns: minmax(0, 1fr) 185px; } .gpvbx-two-column-reverse .gpvbx-section-marker { order: 2; } .gpvbx-section-marker { padding-top: 7px; } .gpvbx-number { display: block; color: #b97800; font-size: 54px; line-height: 1; font-weight: 800; } .gpvbx-marker-label { display: block; margin-top: 10px; color: #7b8b9d; font-size: 15px; line-height: 1.35; font-weight: 800; letter-spacing: 1.4px; } .gpvbx-section-navy .gpvbx-marker-label { color: #b9cce0; } .gpvbx-content { max-width: 850px; } .gpvbx-content h2 { margin: 12px 0 24px; color: #092f62; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; font-weight: 700; } .gpvbx-section-navy .gpvbx-content h2 { color: #ffffff; } .gpvbx-content h2 strong { color: #b97800; } .gpvbx-section-navy .gpvbx-content h2 strong { color: #d99a16; } .gpvbx-content p { margin: 0 0 20px; color: #53657b; font-size: 17px; line-height: 1.85; } .gpvbx-section-navy .gpvbx-content p { color: #d7e4f2; } .gpvbx-content p strong { color: #092f62; } .gpvbx-section-navy .gpvbx-content p strong { color: #d99a16; } /* ========================================================= SECTION 01 — RULE CARD ========================================================= */ .gpvbx-rule-card { margin: 32px 0; overflow: hidden; border: 1px solid #dfc18a; border-radius: 13px; background: linear-gradient( 135deg, #fffaf0, #ffffff ); } .gpvbx-rule-title { padding: 14px 22px; color: #ffffff; background: linear-gradient( 135deg, #061d3d, #092f62 ); font-size: 15px; font-weight: 800; letter-spacing: 1.4px; } .gpvbx-rule-grid { display: grid; grid-template-columns: 1fr 1fr; } .gpvbx-rule-grid > div { padding: 22px; } .gpvbx-rule-grid > div + div { border-left: 1px solid #e5d7bc; } .gpvbx-rule-grid strong { display: block; margin-bottom: 6px; color: #b97800; font-size: 20px; } .gpvbx-rule-grid span { display: block; color: #596a7d; font-size: 15px; line-height: 1.65; } /* ========================================================= SECTION 02 — BANK NOTE ========================================================= */ .gpvbx-bank-note { display: flex; gap: 18px; margin: 30px 0; padding: 25px; border: 1px solid rgba(217,154,22,.28); border-radius: 12px; background: rgba(255,255,255,.055); } .gpvbx-bank-note-icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #061d3d; background: linear-gradient( 135deg, #b97800, #f0b429 ); font-size: 21px; font-weight: 800; } .gpvbx-bank-note strong { display: block; margin-bottom: 5px; color: #d99a16 !important; font-size: 19px; } .gpvbx-bank-note p { margin: 0; color: #d7e4f2; font-size: 16px; } /* ========================================================= SECTION 03 — EXAMPLE ========================================================= */ .gpvbx-example { padding: 95px 0; background: linear-gradient( 180deg, #f8fbff 0%, #ffffff 100% ); } .gpvbx-example-heading { max-width: 760px; margin: 0 auto 45px; text-align: center; } .gpvbx-example-heading h2 { margin: 12px 0 0; color: #092f62; font-size: clamp(31px, 4vw, 44px); line-height: 1.18; } .gpvbx-example-heading h2 strong { color: #b97800; } .gpvbx-example-card { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: stretch; padding: 15px; border: 1px solid #dce5ef; border-radius: 17px; background: #ffffff; box-shadow: 0 15px 45px rgba(9,47,98,.08); } .gpvbx-example-column { padding: 30px 20px; text-align: center; } .gpvbx-example-column span { display: block; color: #69798b; font-size: 15px; font-weight: 700; } .gpvbx-example-column strong { display: block; margin: 9px 0; color: #092f62; font-size: 29px; } .gpvbx-example-column small { display: block; color: #6b7b8c; font-size: 15px; } .gpvbx-example-arrow { display: flex; align-items: center; justify-content: center; color: #b97800; font-size: 28px; font-weight: 800; } .gpvbx-example-highlight { border-radius: 11px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gpvbx-example-highlight span, .gpvbx-example-highlight small { color: #c9d9ea; } .gpvbx-example-highlight strong { color: #d99a16; } .gpvbx-example-disclaimer { max-width: 900px; margin: 20px auto 0; color: #667789; text-align: center; font-size: 15px; line-height: 1.65; } /* ========================================================= SECTION 04 — INDEPENDENT CERTIFICATE ========================================================= */ .gpvbx-independent { border-top: 1px solid #e2e9f1; } .gpvbx-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 32px 0; } .gpvbx-check-item { display: flex; gap: 13px; padding: 17px; border: 1px solid #dbe4ee; border-radius: 10px; background: #f8fbff; } .gpvbx-check-item span { flex: 0 0 31px; width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: #092f62; font-size: 15px; font-weight: 800; } .gpvbx-check-item p { margin: 0; color: #53657b; font-size: 15px; line-height: 1.6; } /* ========================================================= FINAL CTA ========================================================= */ .gpvbx-final { position: relative; overflow: hidden; padding: 105px 0; color: #ffffff; text-align: center; background: radial-gradient( circle at 50% 0%, rgba(185,120,0,.20), transparent 34% ), linear-gradient( 135deg, #04152d 0%, #092f62 60%, #061d3d 100% ); } .gpvbx-final-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .gpvbx-final .gpvbx-kicker { color: #d99a16; } .gpvbx-final h2 { margin: 14px 0 20px; color: #ffffff; font-size: clamp(35px, 5vw, 55px); line-height: 1.12; } .gpvbx-final h2 strong { color: #d99a16; } .gpvbx-final p { max-width: 720px; margin: 0 auto 30px; color: #d9e5f2; font-size: 18px; line-height: 1.8; } .gpvbx-final p strong { color: #d99a16; } .gpvbx-phone { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; font-size: 15px; } .gpvbx-phone span { color: #bdccdc; } .gpvbx-phone a { color: #d99a16 !important; font-size: 17px; font-weight: 800; text-decoration: none !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .gpvbx-hero { padding: 80px 0 70px; } .gpvbx-two-column, .gpvbx-two-column-reverse { grid-template-columns: 1fr; gap: 28px; } .gpvbx-two-column-reverse .gpvbx-section-marker { order: initial; } .gpvbx-section-marker { padding-top: 0; } .gpvbx-example-card { grid-template-columns: 1fr; } .gpvbx-example-arrow { min-height: 35px; transform: rotate(90deg); } } @media (max-width: 650px) { .gpvbx-section, .gpvbx-example, .gpvbx-final { padding: 70px 0; } .gpvbx-hero h1 { font-size: 39px; } .gpvbx-hero p { font-size: 17px; } .gpvbx-rule-grid, .gpvbx-checklist { grid-template-columns: 1fr; } .gpvbx-rule-grid > div + div { border-left: 0; border-top: 1px solid #e5d7bc; } .gpvbx-bank-note { flex-direction: column; } .gpvbx-btn { width: 100%; } .gpvbx-number { font-size: 45px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS GIFTING & INHERITING PROPERTY ROYAL NAVY + GOLD SYSTEM ========================================================= */ .gpvgi-container { width: min(1180px, 92%); margin: 0 auto; } .gpvgi-hero, .gpvgi-overview, .gpvgi-gifting, .gpvgi-checkpoints, .gpvgi-inheritance, .gpvgi-estate, .gpvgi-final-cta { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvgi-hero *, .gpvgi-overview *, .gpvgi-gifting *, .gpvgi-checkpoints *, .gpvgi-inheritance *, .gpvgi-estate *, .gpvgi-final-cta * { box-sizing: border-box; } /* ========================================================= HERO ========================================================= */ .gpvgi-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient( circle at 88% 15%, rgba(185,120,0,.22), transparent 30% ), linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .gpvgi-hero:before { content: ""; position: absolute; width: 430px; height: 430px; top: -260px; right: -150px; border: 1px solid rgba(217,154,22,.30); border-radius: 50%; } .gpvgi-hero:after { content: ""; position: absolute; width: 300px; height: 300px; top: -195px; right: -85px; border: 1px solid rgba(217,154,22,.18); border-radius: 50%; } .gpvgi-hero-content { position: relative; z-index: 2; max-width: 920px; } .gpvgi-eyebrow, .gpvgi-kicker { display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .gpvgi-hero .gpvgi-eyebrow { color: #d99a16; } .gpvgi-hero h1 { max-width: 900px; margin: 17px 0 25px; color: #ffffff; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -1.5px; font-weight: 700; } .gpvgi-hero h1 strong { color: #d99a16; } .gpvgi-hero p { max-width: 810px; margin: 0 0 30px; color: #dbe7f5; font-size: 18px; line-height: 1.85; } .gpvgi-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; } .gpvgi-hero-meta span { padding: 8px 14px; border: 1px solid rgba(217,154,22,.32); border-radius: 50px; background: rgba(255,255,255,.045); color: #e5edf7; font-size: 15px; } /* ========================================================= CTA ========================================================= */ .gpvgi-primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 55px; padding: 14px 27px; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 52%, #f0b429 100% ); color: #061d3d !important; font-size: 16px; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 28px rgba(185,120,0,.25); transition: all .25s ease; } .gpvgi-primary-cta:hover { background: linear-gradient( 135deg, #092f62, #061d3d ); color: #ffffff !important; box-shadow: 0 14px 32px rgba(9,47,98,.25); transform: translateY(-2px); } .gpvgi-primary-cta span { font-size: 20px; line-height: 1; } /* ========================================================= OVERVIEW ========================================================= */ .gpvgi-overview { padding: 95px 0; background: #f8fbff; } .gpvgi-section-heading { max-width: 790px; margin: 0 auto 52px; text-align: center; } .gpvgi-section-heading h2 { margin: 12px 0 17px; color: #092f62; font-size: clamp(31px, 4vw, 46px); line-height: 1.17; font-weight: 700; } .gpvgi-section-heading h2 strong { color: #b97800; } .gpvgi-section-heading p { margin: 0; color: #53657b; font-size: 17px; } .gpvgi-route-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .gpvgi-route-card { display: flex; gap: 22px; padding: 32px; background: #ffffff; border: 1px solid #d9e2ee; border-top: 4px solid #b97800; border-radius: 13px; box-shadow: 0 10px 32px rgba(9,47,98,.07); transition: .3s ease; } .gpvgi-route-card:hover { transform: translateY(-5px); border-color: #b97800; box-shadow: 0 18px 42px rgba(9,47,98,.12); } .gpvgi-route-number { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #092f62, #061d3d); color: #d99a16; font-size: 16px; font-weight: 800; } .gpvgi-route-label { color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; } .gpvgi-route-card h3 { margin: 6px 0 9px; color: #092f62; font-size: 24px; line-height: 1.25; } .gpvgi-route-card p { margin: 0; color: #58697d; font-size: 16px; } /* ========================================================= GIFTING DETAIL ========================================================= */ .gpvgi-gifting { padding: 100px 0; background: linear-gradient( 135deg, #061d3d 0%, #092f62 62%, #061d3d 100% ); color: #ffffff; } .gpvgi-detail-grid { display: grid; grid-template-columns: 185px 1fr; gap: 65px; align-items: start; } .gpvgi-detail-grid.gpvgi-reverse { grid-template-columns: 1fr 185px; } .gpvgi-detail-grid.gpvgi-reverse .gpvgi-side-marker { order: 2; } .gpvgi-side-marker { padding-top: 6px; } .gpvgi-side-marker span { display: block; color: #d99a16; font-size: 52px; line-height: 1; font-weight: 800; } .gpvgi-side-marker small { display: block; margin-top: 10px; color: #b9cce3; font-size: 15px; line-height: 1.5; font-weight: 800; letter-spacing: 1.4px; } .gpvgi-detail-content { max-width: 850px; } .gpvgi-detail-content h2 { margin: 12px 0 23px; color: #ffffff; font-size: clamp(32px, 4vw, 49px); line-height: 1.14; font-weight: 700; } .gpvgi-detail-content h2 strong { color: #d99a16; } .gpvgi-detail-content > p { margin: 0 0 19px; color: #dbe7f5; font-size: 17px; line-height: 1.85; } .gpvgi-detail-content > p strong { color: #f0b429; } /* ========================================================= RULE 11U BOX ========================================================= */ .gpvgi-rule-box { display: flex; gap: 22px; margin: 30px 0; padding: 25px; border-left: 4px solid #b97800; border-radius: 0 12px 12px 0; background: rgba(255,255,255,.065); } .gpvgi-rule-icon { flex: 0 0 55px; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(135deg, #b97800, #d99a16); color: #061d3d; font-size: 17px; font-weight: 900; } .gpvgi-rule-box strong { display: block; color: #f0b429; font-size: 19px; } .gpvgi-rule-box p { margin: 6px 0 0; color: #dbe7f5; font-size: 16px; } /* ========================================================= ILLUSTRATIVE EXAMPLE ========================================================= */ .gpvgi-example { margin: 28px 0; padding: 27px 29px; border: 1px solid rgba(217,154,22,.30); border-radius: 12px; background: linear-gradient( 135deg, rgba(185,120,0,.14), rgba(255,255,255,.035) ); } .gpvgi-example > span { color: #d99a16; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; } .gpvgi-example h3 { margin: 8px 0 8px; color: #ffffff; font-size: 23px; } .gpvgi-example p { margin: 0; color: #dbe7f5; font-size: 16px; } /* ========================================================= GIFT VALUATION NETWORK NOTE ========================================================= */ .gpvgi-network-note { margin: 27px 0 30px; padding: 22px 25px; border-radius: 10px; background: #f8fbff; } .gpvgi-network-note span { display: block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.3px; } .gpvgi-network-note strong { display: block; margin-top: 5px; color: #092f62 !important; font-size: 19px; } .gpvgi-network-note p { margin: 4px 0 0; color: #53657b !important; font-size: 15px; } .gpvgi-network-note a { color: #b97800 !important; font-weight: 800; } /* ========================================================= CHECKPOINTS ========================================================= */ .gpvgi-checkpoints { padding: 95px 0; background: #ffffff; } .gpvgi-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .gpvgi-check-card { position: relative; padding: 30px; border: 1px solid #d9e2ee; border-radius: 13px; background: #f8fbff; transition: .3s ease; } .gpvgi-check-card:hover { transform: translateY(-4px); border-color: #b97800; box-shadow: 0 15px 35px rgba(9,47,98,.09); } .gpvgi-check-card > span { color: #b97800; font-size: 25px; font-weight: 900; } .gpvgi-check-card h3 { margin: 8px 0 10px; color: #092f62; font-size: 21px; } .gpvgi-check-card p { margin: 0; color: #58697d; font-size: 16px; } /* ========================================================= INHERITANCE ========================================================= */ .gpvgi-inheritance { padding: 100px 0; background: #f8fbff; } .gpvgi-inheritance .gpvgi-detail-content h2 { color: #092f62; } .gpvgi-inheritance .gpvgi-detail-content > p { color: #53657b; } .gpvgi-inheritance .gpvgi-detail-content > p strong { color: #092f62; } /* ========================================================= HERITAGE / 2001 PANEL ========================================================= */ .gpvgi-heritage-panel { display: flex; gap: 25px; margin: 30px 0; padding: 28px; border: 1px solid #d9e2ee; border-left: 5px solid #b97800; border-radius: 0 13px 13px 0; background: #ffffff; box-shadow: 0 10px 30px rgba(9,47,98,.07); } .gpvgi-heritage-year { flex: 0 0 105px; color: #b97800; font-size: 40px; line-height: 1; font-weight: 900; } .gpvgi-heritage-panel strong { display: block; color: #092f62; font-size: 19px; } .gpvgi-heritage-panel p { margin: 7px 0 0; color: #53657b; font-size: 16px; } /* ========================================================= ESTATE VALUATION ========================================================= */ .gpvgi-estate { padding: 100px 0; background: linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #061d3d 100% ); } .gpvgi-estate-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; padding: 55px; border: 1px solid rgba(217,154,22,.25); border-radius: 17px; background: rgba(255,255,255,.045); } .gpvgi-estate-heading h2 { margin: 13px 0 0; color: #ffffff; font-size: clamp(32px, 4vw, 47px); line-height: 1.14; } .gpvgi-estate-heading h2 strong { color: #d99a16; } .gpvgi-estate-content > p { margin: 0 0 27px; color: #dbe7f5; font-size: 17px; line-height: 1.85; } .gpvgi-estate-points { display: grid; gap: 12px; margin-bottom: 30px; } .gpvgi-estate-points div { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: rgba(255,255,255,.04); } .gpvgi-estate-points strong { color: #d99a16; font-size: 18px; } .gpvgi-estate-points span { color: #dbe7f5; font-size: 15px; } /* ========================================================= FINAL CTA ========================================================= */ .gpvgi-final-cta { padding: 105px 0; text-align: center; color: #ffffff; background: radial-gradient( circle at 50% 0%, rgba(185,120,0,.22), transparent 36% ), linear-gradient( 135deg, #04152d, #092f62, #061d3d ); } .gpvgi-final-inner { max-width: 820px; margin: 0 auto; } .gpvgi-final-inner h2 { margin: 13px 0 18px; color: #ffffff; font-size: clamp(36px, 5vw, 57px); line-height: 1.1; } .gpvgi-final-inner h2 strong { color: #d99a16; } .gpvgi-final-inner p { max-width: 750px; margin: 0 auto 30px; color: #dbe7f5; font-size: 18px; line-height: 1.8; } .gpvgi-large-cta { min-height: 60px; padding: 16px 34px; font-size: 17px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .gpvgi-detail-grid, .gpvgi-detail-grid.gpvgi-reverse { grid-template-columns: 1fr; gap: 28px; } .gpvgi-detail-grid.gpvgi-reverse .gpvgi-side-marker { order: initial; } .gpvgi-route-grid, .gpvgi-check-grid, .gpvgi-estate-panel { grid-template-columns: 1fr; } .gpvgi-side-marker { padding-top: 0; } .gpvgi-estate-panel { gap: 30px; padding: 38px; } } @media (max-width: 650px) { .gpvgi-hero { padding: 78px 0 68px; } .gpvgi-hero h1 { font-size: 39px; } .gpvgi-hero p { font-size: 17px; } .gpvgi-overview, .gpvgi-gifting, .gpvgi-checkpoints, .gpvgi-inheritance, .gpvgi-estate, .gpvgi-final-cta { padding: 70px 0; } .gpvgi-route-card, .gpvgi-rule-box, .gpvgi-heritage-panel { flex-direction: column; } .gpvgi-heritage-year { flex-basis: auto; } .gpvgi-primary-cta { width: 100%; } .gpvgi-estate-panel { padding: 28px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS BANK / MORTGAGE / SARFAESI PAGE ROYAL NAVY + GOLD DESIGN SYSTEM ========================================================= */ .gpvbs-hero, .gpvbs-mortgage, .gpvbs-bank-process, .gpvbs-sarfaesi, .gpvbs-framework, .gpvbs-dda, .gpvbs-dda-details, .gpvbs-documents, .gpvbs-final-cta { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvbs-hero *, .gpvbs-mortgage *, .gpvbs-bank-process *, .gpvbs-sarfaesi *, .gpvbs-framework *, .gpvbs-dda *, .gpvbs-dda-details *, .gpvbs-documents *, .gpvbs-final-cta * { box-sizing: border-box; } .gpvbs-container { width: min(1180px, 92%); margin: 0 auto; } .gpvbs-hero strong, .gpvbs-mortgage strong, .gpvbs-bank-process strong, .gpvbs-sarfaesi strong, .gpvbs-framework strong, .gpvbs-dda strong, .gpvbs-dda-details strong, .gpvbs-documents strong, .gpvbs-final-cta strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .gpvbs-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient(circle at 85% 15%, rgba(185,120,0,.22), transparent 28%), linear-gradient(135deg, #04152d 0%, #092f62 62%, #061d3d 100%); } .gpvbs-hero:before { content: ""; position: absolute; width: 420px; height: 420px; right: -220px; top: -230px; border: 1px solid rgba(217,154,22,.32); border-radius: 50%; } .gpvbs-hero:after { content: ""; position: absolute; width: 270px; height: 270px; right: -130px; top: -145px; border: 1px solid rgba(217,154,22,.22); border-radius: 50%; } .gpvbs-hero-content { position: relative; z-index: 2; max-width: 900px; } .gpvbs-eyebrow, .gpvbs-kicker { display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .gpvbs-hero .gpvbs-eyebrow { color: #d99a16; } .gpvbs-hero h1 { max-width: 900px; margin: 18px 0 24px; color: #ffffff; font-size: clamp(40px, 5.5vw, 67px); line-height: 1.06; letter-spacing: -1.8px; font-weight: 700; } .gpvbs-hero h1 strong { color: #d99a16; } .gpvbs-hero-text { max-width: 790px; margin: 0 0 32px; color: #dce7f4; font-size: 19px; line-height: 1.8; } .gpvbs-hero-text strong { color: #f0b429; } .gpvbs-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .gpvbs-hero-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .gpvbs-hero-points span { padding: 8px 15px; border: 1px solid rgba(217,154,22,.35); border-radius: 50px; background: rgba(255,255,255,.04); color: #dce7f4; font-size: 15px; } .gpvbs-hero-points strong { color: #d99a16; } /* ========================================================= BUTTON SYSTEM ========================================================= */ .gpvbs-primary-btn, .gpvbs-phone-btn, .gpvbs-framework-btn, .gpvbs-final-phone { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 14px 25px; border-radius: 7px; text-decoration: none !important; font-size: 16px; font-weight: 800; transition: all .25s ease; } .gpvbs-primary-btn { color: #061d3d !important; background: linear-gradient( 135deg, #b97800 0%, #d99a16 50%, #f0b429 100% ); box-shadow: 0 10px 28px rgba(185,120,0,.28); } .gpvbs-primary-btn:hover { color: #092f62 !important; background: #ffffff; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,.2); } .gpvbs-primary-btn span { font-size: 20px; } .gpvbs-phone-btn { border: 1px solid rgba(217,154,22,.55); color: #f0b429 !important; background: rgba(255,255,255,.04); } .gpvbs-phone-btn:hover { background: #b97800; color: #061d3d !important; } .gpvbs-phone-btn span { font-size: 18px; } /* ========================================================= MORTGAGE SECTION ========================================================= */ .gpvbs-mortgage { padding: 100px 0; background: #f8fbff; } .gpvbs-section-intro { max-width: 800px; margin: 0 auto 55px; text-align: center; } .gpvbs-section-intro h2, .gpvbs-process-heading h2, .gpvbs-dda-intro h2, .gpvbs-documents-heading h2 { margin: 13px 0 18px; color: #092f62; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; } .gpvbs-section-intro h2 strong, .gpvbs-process-heading h2 strong, .gpvbs-dda-intro h2 strong, .gpvbs-documents-heading h2 strong { color: #b97800; } .gpvbs-section-intro > p { margin: 0; color: #53657a; font-size: 17px; } .gpvbs-section-intro > p strong { color: #092f62; } .gpvbs-mortgage-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 45px; align-items: stretch; } .gpvbs-mortgage-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px; border-radius: 15px; background: linear-gradient(145deg, #061d3d, #092f62); box-shadow: 0 18px 45px rgba(9,47,98,.13); } .gpvbs-mortgage-main p { margin: 0 0 20px; color: #dce7f4; font-size: 17px; } .gpvbs-mortgage-main strong { color: #f0b429; } .gpvbs-value-panel { overflow: hidden; border: 1px solid #dce4ed; border-radius: 15px; background: #ffffff; box-shadow: 0 15px 40px rgba(9,47,98,.08); } .gpvbs-value-panel-head { padding: 18px 25px; color: #ffffff; background: linear-gradient(135deg, #061d3d, #092f62); font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvbs-value-item { display: flex; gap: 18px; padding: 24px 25px; border-bottom: 1px solid #e6ebf1; } .gpvbs-value-item:last-child { border-bottom: 0; } .gpvbs-value-icon { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #b97800, #d99a16); font-size: 15px; font-weight: 800; } .gpvbs-value-item strong { display: block; margin-bottom: 4px; color: #092f62; font-size: 18px; } .gpvbs-value-item p { margin: 0; color: #5b6b7d; font-size: 15px; line-height: 1.65; } .gpvbs-value-item p strong { display: inline; color: #b97800; font-size: inherit; } /* ========================================================= BANK PROCESS ========================================================= */ .gpvbs-bank-process { padding: 95px 0; background: #ffffff; } .gpvbs-process-heading { max-width: 750px; margin: 0 auto 50px; text-align: center; } .gpvbs-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .gpvbs-process-card { position: relative; min-height: 255px; padding: 30px 25px; border: 1px solid #dce4ed; border-radius: 13px; background: #f8fbff; transition: all .3s ease; } .gpvbs-process-card:hover { border-color: #b97800; transform: translateY(-5px); box-shadow: 0 18px 35px rgba(9,47,98,.09); } .gpvbs-process-number { display: inline-flex; width: 45px; height: 45px; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: #092f62; font-size: 15px; font-weight: 800; } .gpvbs-process-card h3 { margin: 20px 0 10px; color: #092f62; font-size: 21px; line-height: 1.3; } .gpvbs-process-card p { margin: 0; color: #596b7e; font-size: 15px; line-height: 1.7; } .gpvbs-process-card p strong { color: #b97800; } /* ========================================================= SARFAESI SECTION ========================================================= */ .gpvbs-sarfaesi { padding: 105px 0; color: #ffffff; background: radial-gradient(circle at 90% 15%, rgba(185,120,0,.18), transparent 30%), linear-gradient(135deg, #04152d, #092f62 65%, #061d3d); } .gpvbs-sarfaesi-layout { display: grid; grid-template-columns: 160px 1fr; gap: 55px; } .gpvbs-sarfaesi-number span { display: block; color: #d99a16; font-size: 58px; line-height: 1; font-weight: 800; } .gpvbs-sarfaesi-number small { display: block; margin-top: 12px; color: #b8c9dc; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvbs-sarfaesi-content { max-width: 850px; } .gpvbs-sarfaesi-content h2 { margin: 13px 0 22px; color: #ffffff; font-size: clamp(32px, 4vw, 49px); line-height: 1.12; } .gpvbs-sarfaesi-content h2 strong { color: #d99a16; } .gpvbs-sarfaesi-content > p { margin: 0 0 19px; color: #dce7f4; font-size: 17px; line-height: 1.85; } .gpvbs-sarfaesi-content > p strong { color: #f0b429; } .gpvbs-sarfaesi-values { display: grid; grid-template-columns: 1fr 50px 1fr; gap: 15px; align-items: center; margin: 35px 0; } .gpvbs-sarfaesi-value { padding: 25px; border: 1px solid rgba(217,154,22,.3); border-radius: 12px; background: rgba(255,255,255,.05); } .gpvbs-sarfaesi-value span { display: block; margin-bottom: 6px; color: #d99a16; font-size: 27px; font-weight: 800; } .gpvbs-sarfaesi-value strong { display: block; color: #ffffff; font-size: 17px; } .gpvbs-sarfaesi-value small { display: block; margin-top: 4px; color: #bdcce0; font-size: 15px; } .gpvbs-sarfaesi-arrow { color: #d99a16; text-align: center; font-size: 28px; } .gpvbs-note { margin: 25px 0 30px; padding: 22px 25px; border-left: 4px solid #b97800; background: rgba(255,255,255,.06); } .gpvbs-note strong { color: #d99a16; } .gpvbs-note p { margin: 6px 0 0; color: #dce7f4; font-size: 15px; } .gpvbs-note p strong { color: #f0b429; } /* ========================================================= FRAMEWORK ROUTING ========================================================= */ .gpvbs-framework { padding: 65px 0; background: #f8fbff; } .gpvbs-framework-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 38px 45px; border: 1px solid #dce4ed; border-radius: 14px; background: #ffffff; box-shadow: 0 12px 35px rgba(9,47,98,.07); } .gpvbs-framework-inner h2 { margin: 10px 0; color: #092f62; font-size: 30px; line-height: 1.2; } .gpvbs-framework-inner h2 strong { color: #b97800; } .gpvbs-framework-inner p { max-width: 700px; margin: 0; color: #5b6b7d; font-size: 15px; } .gpvbs-framework-btn { flex: 0 0 auto; color: #ffffff !important; background: #092f62; box-shadow: 0 10px 25px rgba(9,47,98,.18); } .gpvbs-framework-btn:hover { color: #061d3d !important; background: linear-gradient(135deg, #b97800, #d99a16); transform: translateY(-2px); } /* ========================================================= DDA INTRO ========================================================= */ .gpvbs-dda { position: relative; overflow: hidden; padding: 100px 0; color: #ffffff; background: radial-gradient(circle at 90% 30%, rgba(185,120,0,.18), transparent 30%), linear-gradient(135deg, #061d3d, #092f62); } .gpvbs-dda-heading { max-width: 820px; } .gpvbs-dda-heading .gpvbs-kicker { color: #d99a16; } .gpvbs-dda-heading h2 { margin: 13px 0 20px; color: #ffffff; font-size: clamp(35px, 4.5vw, 55px); line-height: 1.1; } .gpvbs-dda-heading h2 strong { color: #d99a16; } .gpvbs-dda-heading p { max-width: 780px; margin: 0; color: #dce7f4; font-size: 18px; line-height: 1.8; } .gpvbs-dda-heading p strong { color: #f0b429; } .gpvbs-dda-badge { position: absolute; right: 7%; bottom: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 155px; height: 155px; border: 1px solid rgba(217,154,22,.5); border-radius: 50%; background: rgba(255,255,255,.04); } .gpvbs-dda-badge span { color: #d99a16; font-size: 35px; font-weight: 900; } .gpvbs-dda-badge strong { color: #ffffff; font-size: 15px; letter-spacing: 1px; } /* ========================================================= DDA DETAILS ========================================================= */ .gpvbs-dda-details { padding: 100px 0; background: #f8fbff; } .gpvbs-dda-intro { max-width: 800px; margin-bottom: 50px; } .gpvbs-dda-intro p { margin: 0; color: #596b7e; font-size: 17px; } .gpvbs-dda-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .gpvbs-dda-card { padding: 32px; border: 1px solid #dce4ed; border-radius: 14px; background: #ffffff; box-shadow: 0 8px 30px rgba(9,47,98,.055); transition: all .3s ease; } .gpvbs-dda-card:hover { border-color: #b97800; transform: translateY(-4px); box-shadow: 0 18px 38px rgba(9,47,98,.1); } .gpvbs-dda-card-top { display: flex; align-items: center; gap: 17px; margin-bottom: 17px; } .gpvbs-dda-card-top span { display: flex; flex: 0 0 45px; width: 45px; height: 45px; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #b97800, #d99a16); font-size: 15px; font-weight: 800; } .gpvbs-dda-card h3 { margin: 0; color: #092f62; font-size: 21px; line-height: 1.3; } .gpvbs-dda-card > p { margin: 0 0 15px; color: #596b7e; font-size: 16px; } .gpvbs-dda-card > p strong { color: #092f62; } .gpvbs-dda-example { margin-top: 18px; padding: 18px; border-left: 3px solid #b97800; background: #f8fbff; } .gpvbs-dda-example strong { color: #b97800; font-size: 15px; } .gpvbs-dda-example p { margin: 5px 0 0; color: #596b7e; font-size: 15px; } /* ========================================================= DDA CTA ========================================================= */ .gpvbs-dda-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 40px; padding: 28px 32px; border-radius: 12px; background: linear-gradient(135deg, #061d3d, #092f62); } .gpvbs-dda-cta strong { display: block; color: #ffffff; font-size: 19px; } .gpvbs-dda-cta > div > span { display: block; margin-top: 3px; color: #cbd9e8; font-size: 15px; } /* ========================================================= DOCUMENTS ========================================================= */ .gpvbs-documents { padding: 90px 0; background: #ffffff; } .gpvbs-documents-heading { max-width: 800px; margin-bottom: 40px; } .gpvbs-document-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #dce4ed; border-radius: 13px; overflow: hidden; } .gpvbs-document-strip div { min-height: 130px; padding: 25px; border-right: 1px solid #dce4ed; background: #f8fbff; } .gpvbs-document-strip div:last-child { border-right: 0; } .gpvbs-document-strip span { display: block; margin-bottom: 12px; color: #b97800; font-size: 15px; font-weight: 800; } .gpvbs-document-strip strong { color: #092f62; font-size: 16px; line-height: 1.4; } /* ========================================================= FINAL CTA ========================================================= */ .gpvbs-final-cta { padding: 105px 0; color: #ffffff; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(185,120,0,.2), transparent 35%), linear-gradient(135deg, #04152d, #092f62 65%, #061d3d); } .gpvbs-final-inner { max-width: 820px; margin: 0 auto; } .gpvbs-final-inner .gpvbs-kicker { color: #d99a16; } .gpvbs-final-inner h2 { margin: 13px 0 18px; color: #ffffff; font-size: clamp(36px, 5vw, 58px); line-height: 1.1; } .gpvbs-final-inner h2 strong { color: #d99a16; } .gpvbs-final-inner p { max-width: 740px; margin: 0 auto 30px; color: #dce7f4; font-size: 18px; line-height: 1.8; } .gpvbs-final-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; } .gpvbs-large-btn { min-height: 60px; padding: 16px 32px; font-size: 17px; } .gpvbs-final-phone { border: 1px solid rgba(217,154,22,.55); color: #f0b429 !important; background: rgba(255,255,255,.04); } .gpvbs-final-phone:hover { color: #061d3d !important; background: #b97800; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1000px) { .gpvbs-mortgage-layout { grid-template-columns: 1fr; } .gpvbs-process-grid { grid-template-columns: repeat(2, 1fr); } .gpvbs-dda-badge { display: none; } .gpvbs-document-strip { grid-template-columns: repeat(2, 1fr); } .gpvbs-document-strip div:nth-child(2) { border-right: 0; } .gpvbs-document-strip div:nth-child(-n+2) { border-bottom: 1px solid #dce4ed; } } @media (max-width: 800px) { .gpvbs-sarfaesi-layout { grid-template-columns: 1fr; gap: 25px; } .gpvbs-sarfaesi-values { grid-template-columns: 1fr; } .gpvbs-sarfaesi-arrow { transform: rotate(90deg); } .gpvbs-framework-inner { flex-direction: column; align-items: flex-start; } .gpvbs-dda-grid { grid-template-columns: 1fr; } .gpvbs-dda-cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .gpvbs-hero { padding: 75px 0 65px; } .gpvbs-mortgage, .gpvbs-bank-process, .gpvbs-sarfaesi, .gpvbs-dda, .gpvbs-dda-details, .gpvbs-documents, .gpvbs-final-cta { padding: 70px 0; } .gpvbs-hero h1 { font-size: 39px; } .gpvbs-hero-text { font-size: 17px; } .gpvbs-hero-actions, .gpvbs-final-actions { align-items: stretch; flex-direction: column; } .gpvbs-primary-btn, .gpvbs-phone-btn, .gpvbs-framework-btn, .gpvbs-final-phone { width: 100%; } .gpvbs-process-grid { grid-template-columns: 1fr; } .gpvbs-document-strip { grid-template-columns: 1fr; } .gpvbs-document-strip div { border-right: 0 !important; border-bottom: 1px solid #dce4ed; } .gpvbs-document-strip div:last-child { border-bottom: 0; } .gpvbs-mortgage-main { padding: 28px; } .gpvbs-value-item { padding: 21px; } } /* ========================================================= NRI PROPERTY SALE ROYAL NAVY + GOLD DESIGN SYSTEM ========================================================= */ .nri-pvs-container { width: min(1180px, 92%); margin: 0 auto; } .nri-pvs-hero, .nri-pvs-sequence, .nri-pvs-fmv, .nri-pvs-section197, .nri-pvs-fema, .nri-pvs-compliance, .nri-pvs-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .nri-pvs-hero *, .nri-pvs-sequence *, .nri-pvs-fmv *, .nri-pvs-section197 *, .nri-pvs-fema *, .nri-pvs-compliance *, .nri-pvs-final * { box-sizing: border-box; } /* ========================================================= HERO ========================================================= */ .nri-pvs-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient( circle at 88% 20%, rgba(185,120,0,.24), transparent 28% ), linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .nri-pvs-hero:before { content: ""; position: absolute; width: 420px; height: 420px; right: -210px; top: -200px; border: 1px solid rgba(240,180,41,.28); border-radius: 50%; } .nri-pvs-hero:after { content: ""; position: absolute; width: 270px; height: 270px; right: -135px; top: -125px; border: 1px solid rgba(240,180,41,.20); border-radius: 50%; } .nri-pvs-hero-content { position: relative; z-index: 2; max-width: 920px; } .nri-pvs-eyebrow, .nri-pvs-kicker { display: inline-block; color: #b97800; font-size: 15px; line-height: 1.4; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .nri-pvs-hero .nri-pvs-eyebrow { color: #f0b429; } .nri-pvs-hero h1 { margin: 18px 0 25px; max-width: 920px; color: #ffffff; font-size: clamp(40px, 5vw, 65px); line-height: 1.08; letter-spacing: -1.7px; font-weight: 700; } .nri-pvs-hero h1 strong { color: #f0b429; } .nri-pvs-hero p { max-width: 820px; margin: 0 0 32px; color: #dce8f5; font-size: 19px; line-height: 1.8; } .nri-pvs-hero-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .nri-pvs-hero-points span { padding: 9px 16px; border: 1px solid rgba(240,180,41,.30); border-radius: 50px; background: rgba(255,255,255,.045); color: #e8f1fa; font-size: 15px; } /* ========================================================= CTA BUTTONS ========================================================= */ .nri-pvs-primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 56px; padding: 15px 27px; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 52%, #f0b429 100% ); color: #061d3d !important; font-size: 16px; line-height: 1.3; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 30px rgba(185,120,0,.25); transition: all .25s ease; } .nri-pvs-primary-cta span { font-size: 21px; line-height: 1; } .nri-pvs-primary-cta:hover { background: linear-gradient( 135deg, #092f62, #061d3d ); color: #f0b429 !important; transform: translateY(-2px); box-shadow: 0 15px 35px rgba(4,21,45,.30); } /* ========================================================= SEQUENCE INTRO ========================================================= */ .nri-pvs-sequence { padding: 100px 0; background: #f8fbff; } .nri-pvs-section-heading { max-width: 800px; margin: 0 auto 65px; text-align: center; } .nri-pvs-section-heading h2 { margin: 13px 0 18px; color: #092f62; font-size: clamp(32px, 4vw, 48px); line-height: 1.16; } .nri-pvs-section-heading h2 strong { color: #b97800; } .nri-pvs-section-heading p { margin: 0; color: #52667d; font-size: 17px; } /* ========================================================= TIMELINE ========================================================= */ .nri-pvs-timeline { position: relative; max-width: 950px; margin: auto; } .nri-pvs-line { position: absolute; left: 37px; top: 45px; bottom: 45px; width: 2px; background: linear-gradient( to bottom, #b97800, #d99a16, #092f62 ); } .nri-pvs-step { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 28px; margin-bottom: 35px; } .nri-pvs-step:last-child { margin-bottom: 0; } .nri-pvs-step-number { position: relative; z-index: 2; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border: 4px solid #f8fbff; border-radius: 50%; background: linear-gradient( 135deg, #b97800, #f0b429 ); color: #092f62; font-size: 17px; font-weight: 900; box-shadow: 0 8px 22px rgba(9,47,98,.16); } .nri-pvs-step-card { padding: 34px; border: 1px solid #dce5ef; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 32px rgba(9,47,98,.07); } .nri-pvs-step-label { color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .nri-pvs-step-card h3 { margin: 8px 0 17px; color: #092f62; font-size: 29px; line-height: 1.25; } .nri-pvs-step-card h3 strong { color: #b97800; } .nri-pvs-step-card p { margin: 0 0 17px; color: #53667b; font-size: 16px; line-height: 1.8; } .nri-pvs-step-card p strong { color: #092f62; } .nri-pvs-step-highlight { display: grid; grid-template-columns: 180px 1fr; gap: 20px; margin-top: 24px; padding: 20px 22px; border-left: 4px solid #b97800; border-radius: 0 8px 8px 0; background: linear-gradient( 90deg, rgba(185,120,0,.09), rgba(9,47,98,.03) ); } .nri-pvs-step-highlight strong { color: #092f62; font-size: 16px; } .nri-pvs-step-highlight span { color: #5a6c7f; font-size: 15px; } /* ========================================================= SECTION 55(2)(b) ========================================================= */ .nri-pvs-fmv { padding: 105px 0; color: #ffffff; background: radial-gradient( circle at 15% 50%, rgba(185,120,0,.18), transparent 30% ), linear-gradient( 135deg, #061d3d, #092f62 60%, #04152d ); } .nri-pvs-fmv-grid { display: grid; grid-template-columns: 210px 1fr; gap: 70px; align-items: start; } .nri-pvs-fmv-badge { padding-top: 7px; } .nri-pvs-fmv-badge span { display: block; color: #f0b429; font-size: 43px; line-height: 1; font-weight: 900; } .nri-pvs-fmv-badge small { display: block; margin-top: 11px; color: #b9cce1; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; } .nri-pvs-fmv-content { max-width: 850px; } .nri-pvs-fmv-content .nri-pvs-kicker { color: #f0b429; } .nri-pvs-fmv-content h2 { margin: 13px 0 22px; color: #ffffff; font-size: clamp(32px, 4vw, 50px); line-height: 1.15; } .nri-pvs-fmv-content h2 strong { color: #f0b429; } .nri-pvs-fmv-content p { margin: 0 0 19px; color: #d9e6f4; font-size: 17px; line-height: 1.85; } .nri-pvs-fmv-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 32px 0; } .nri-pvs-fmv-points div { padding: 18px; border: 1px solid rgba(240,180,41,.20); border-radius: 9px; background: rgba(255,255,255,.045); } .nri-pvs-fmv-points strong { display: block; color: #f0b429; font-size: 22px; } .nri-pvs-fmv-points span { display: block; margin-top: 5px; color: #d7e4f1; font-size: 15px; } /* ========================================================= SECTION 197 ========================================================= */ .nri-pvs-section197 { padding: 100px 0; background: #ffffff; text-align: center; } .nri-pvs-section197-inner { max-width: 900px; margin: auto; } .nri-pvs-section197 h2 { margin: 13px 0 20px; color: #092f62; font-size: clamp(32px, 4vw, 50px); line-height: 1.15; } .nri-pvs-section197 h2 strong { color: #b97800; } .nri-pvs-section197 p { max-width: 800px; margin: 0 auto 30px; color: #52667d; font-size: 17px; line-height: 1.85; } .nri-pvs-section197-box { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 40px 0; padding: 25px; border: 1px solid #dbe4ef; border-radius: 14px; background: linear-gradient( 135deg, #f8fbff, #ffffff ); box-shadow: 0 12px 35px rgba(9,47,98,.07); } .nri-pvs-section197-box div:not(.nri-pvs-flow-arrow) { min-width: 175px; padding: 18px; border-radius: 9px; background: #ffffff; border: 1px solid #e0e7ef; } .nri-pvs-section197-box span { display: block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1px; } .nri-pvs-section197-box strong { display: block; margin-top: 4px; color: #092f62; font-size: 16px; } .nri-pvs-flow-arrow { color: #b97800; font-size: 25px; font-weight: 800; } /* ========================================================= FEMA ========================================================= */ .nri-pvs-fema { padding: 100px 0; background: #f8fbff; } .nri-pvs-fema-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 65px; align-items: center; } .nri-pvs-fema-content h2 { margin: 13px 0 21px; color: #092f62; font-size: clamp(32px, 4vw, 49px); line-height: 1.15; } .nri-pvs-fema-content h2 strong { color: #b97800; } .nri-pvs-fema-content p { margin: 0 0 19px; color: #52667d; font-size: 17px; line-height: 1.85; } .nri-pvs-fema-card { position: relative; padding: 35px; border-radius: 15px; background: linear-gradient( 145deg, #061d3d, #092f62 ); box-shadow: 0 18px 45px rgba(9,47,98,.18); } .nri-pvs-fema-card:before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 4px; border-radius: 4px; background: linear-gradient( to bottom, #b97800, #f0b429 ); } .nri-pvs-fema-card-title { display: block; margin-bottom: 20px; color: #f0b429; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .nri-pvs-fema-card ul { margin: 0; padding: 0; list-style: none; } .nri-pvs-fema-card li { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #dbe7f3; font-size: 15px; } .nri-pvs-fema-card li:last-child { border-bottom: 0; } .nri-pvs-fema-card li strong { color: #ffffff; } /* ========================================================= COMPLIANCE ========================================================= */ .nri-pvs-compliance { padding: 100px 0; background: #ffffff; } .nri-pvs-compliance-heading { max-width: 800px; margin: 0 auto 50px; text-align: center; } .nri-pvs-compliance-heading h2 { margin: 13px 0 18px; color: #092f62; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; } .nri-pvs-compliance-heading h2 strong { color: #b97800; } .nri-pvs-compliance-heading p { margin: 0; color: #52667d; font-size: 17px; } .nri-pvs-compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .nri-pvs-compliance-card { padding: 32px; border: 1px solid #dce5ef; border-radius: 13px; background: #f8fbff; transition: all .25s ease; } .nri-pvs-compliance-card:hover { border-color: #b97800; transform: translateY(-4px); box-shadow: 0 15px 35px rgba(9,47,98,.09); } .nri-pvs-compliance-card > span { color: #b97800; font-size: 26px; font-weight: 900; } .nri-pvs-compliance-card h3 { margin: 8px 0 10px; color: #092f62; font-size: 24px; } .nri-pvs-compliance-card p { margin: 0; color: #586a7e; font-size: 15px; line-height: 1.75; } /* ========================================================= FINAL CTA ========================================================= */ .nri-pvs-final { position: relative; overflow: hidden; padding: 105px 0; color: #ffffff; text-align: center; background: radial-gradient( circle at 50% 0, rgba(185,120,0,.22), transparent 35% ), linear-gradient( 135deg, #04152d, #092f62 60%, #061d3d ); } .nri-pvs-final-inner { position: relative; z-index: 2; max-width: 850px; margin: auto; } .nri-pvs-final .nri-pvs-kicker { color: #f0b429; } .nri-pvs-final h2 { margin: 14px 0 19px; color: #ffffff; font-size: clamp(36px, 5vw, 57px); line-height: 1.1; } .nri-pvs-final h2 strong { color: #f0b429; } .nri-pvs-final p { max-width: 760px; margin: 0 auto 32px; color: #d9e6f4; font-size: 18px; line-height: 1.8; } .nri-pvs-large-cta { min-height: 62px; padding: 17px 34px; font-size: 17px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .nri-pvs-fmv-grid, .nri-pvs-fema-grid { grid-template-columns: 1fr; gap: 35px; } .nri-pvs-compliance-grid { grid-template-columns: 1fr; } .nri-pvs-fmv-badge { padding-top: 0; } .nri-pvs-fmv-points { grid-template-columns: 1fr; } } @media (max-width: 700px) { .nri-pvs-hero, .nri-pvs-sequence, .nri-pvs-fmv, .nri-pvs-section197, .nri-pvs-fema, .nri-pvs-compliance, .nri-pvs-final { padding: 70px 0; } .nri-pvs-hero h1 { font-size: 39px; } .nri-pvs-hero p { font-size: 17px; } .nri-pvs-step { grid-template-columns: 58px 1fr; gap: 17px; } .nri-pvs-step-number { width: 58px; height: 58px; font-size: 15px; } .nri-pvs-line { left: 28px; } .nri-pvs-step-card { padding: 25px; } .nri-pvs-step-card h3 { font-size: 25px; } .nri-pvs-step-highlight { grid-template-columns: 1fr; gap: 5px; } .nri-pvs-section197-box { flex-direction: column; } .nri-pvs-flow-arrow { transform: rotate(90deg); } .nri-pvs-section197-box div:not(.nri-pvs-flow-arrow) { width: 100%; } .nri-pvs-primary-cta { width: 100%; } } /* ========================================================= ROYAL DESIGN TOKENS ========================================================= */ .gadv-dda-hero, .gadv-mortgage-map, .gadv-sarfaesi, .gadv-dda-explained, .gadv-title-compare, .gadv-dda-final { --gadv-navy: #092f62; --gadv-navy-dark: #061d3d; --gadv-navy-deep: #04152d; --gadv-gold: #b97800; --gadv-gold-light: #d99a16; --gadv-gold-bright: #f0b429; --gadv-navy-gradient: linear-gradient(135deg, #061d3d 0%, #092f62 58%, #04152d 100%); --gadv-gold-gradient: linear-gradient(135deg, #b97800 0%, #d99a16 52%, #f0b429 100%); --gadv-text: #26384d; --gadv-muted: #596a7d; --gadv-light: #f8fbff; } /* ========================================================= GLOBAL SECTION RULES ========================================================= */ .gadv-dda-hero *, .gadv-mortgage-map *, .gadv-sarfaesi *, .gadv-dda-explained *, .gadv-title-compare *, .gadv-dda-final * { box-sizing: border-box; } .gadv-dda-hero, .gadv-mortgage-map, .gadv-sarfaesi, .gadv-dda-explained, .gadv-title-compare, .gadv-dda-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gadv-dda-container, .gadv-mortgage-container, .gadv-sarfaesi-container, .gadv-dda-explained-container, .gadv-title-compare-container, .gadv-dda-final-container { width: min(1180px, 92%); margin: 0 auto; } /* ========================================================= SECTION 1 — DDA HERO ========================================================= */ .gadv-dda-hero { position: relative; overflow: hidden; padding: 100px 0 90px; background: radial-gradient( circle at 82% 20%, rgba(217,154,22,.18), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 48%, #092f62 100% ); color: #ffffff; } .gadv-dda-hero::before { content: ""; position: absolute; width: 430px; height: 430px; right: -180px; top: -220px; border: 1px solid rgba(240,180,41,.28); border-radius: 50%; } .gadv-dda-hero::after { content: ""; position: absolute; width: 310px; height: 310px; right: -120px; top: -160px; border: 1px solid rgba(240,180,41,.17); border-radius: 50%; } .gadv-dda-container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 80px; align-items: center; } .gadv-dda-hero-content { max-width: 850px; } .gadv-dda-eyebrow, .gadv-mortgage-heading > span, .gadv-sarfaesi-label, .gadv-dda-explained-heading > span, .gadv-title-heading > span, .gadv-dda-final-content > span { display: inline-block; color: #d99a16; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .gadv-dda-hero h1 { margin: 14px 0 12px; color: #ffffff; font-size: clamp(48px, 7vw, 82px); line-height: 1; letter-spacing: -2px; font-weight: 700; } .gadv-dda-hero h1 strong { color: #d99a16; } .gadv-dda-gold-line { width: 85px; height: 4px; margin: 25px 0; border-radius: 10px; background: linear-gradient( 90deg, #b97800, #d99a16, #f0b429 ); } .gadv-dda-hero p { max-width: 830px; margin: 0 0 18px; color: #dce7f4; font-size: 17px; } .gadv-dda-hero p strong { color: #f0b429; } .gadv-dda-lead { font-size: 20px !important; line-height: 1.75; } .gadv-dda-primary-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 20px; padding: 15px 22px; border-radius: 8px; background: linear-gradient( 135deg, #b97800, #d99a16, #f0b429 ); color: #061d3d !important; text-decoration: none !important; font-size: 16px; font-weight: 800; box-shadow: 0 12px 30px rgba(0,0,0,.2); transition: all .25s ease; } .gadv-dda-primary-cta span { font-size: 17px; } .gadv-dda-primary-cta small { padding-left: 15px; border-left: 1px solid rgba(6,29,61,.35); font-size: 15px; font-weight: 800; } .gadv-dda-primary-cta b { font-size: 21px; } .gadv-dda-primary-cta:hover { transform: translateY(-3px); background: #ffffff; color: #092f62 !important; } .gadv-dda-hero-badge { position: relative; padding: 35px 25px; text-align: center; border: 1px solid rgba(240,180,41,.35); border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 30px rgba(255,255,255,.025), 0 20px 50px rgba(0,0,0,.16); } .gadv-dda-badge-top, .gadv-dda-badge-bottom { color: #d99a16; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gadv-dda-hero-badge strong { display: block; margin: 15px 0 0; color: #f0b429; font-size: 64px; line-height: 1; } .gadv-dda-hero-badge > span { display: block; margin: 10px 0 25px; color: #ffffff; font-size: 16px; } .gadv-dda-badge-bottom { padding-top: 18px; border-top: 1px solid rgba(240,180,41,.25); font-size: 15px; } /* ========================================================= SECTION 2 — MORTGAGE MAP ========================================================= */ .gadv-mortgage-map { padding: 100px 0; background: #f8fbff; } .gadv-mortgage-heading { max-width: 780px; margin: 0 auto 55px; text-align: center; } .gadv-mortgage-heading h2 { margin: 12px 0 15px; color: #092f62; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; } .gadv-mortgage-heading h2 strong { color: #b97800; } .gadv-mortgage-heading p { margin: 0; color: #596a7d; font-size: 17px; } .gadv-mortgage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .gadv-mortgage-card { display: flex; gap: 22px; padding: 30px; background: #ffffff; border: 1px solid #dce5ef; border-radius: 14px; box-shadow: 0 8px 28px rgba(9,47,98,.06); transition: all .3s ease; } .gadv-mortgage-card:hover { transform: translateY(-5px); border-color: #d99a16; box-shadow: 0 16px 38px rgba(9,47,98,.12); } .gadv-mortgage-number { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 135deg, #061d3d, #092f62 ); color: #f0b429; font-size: 15px; font-weight: 800; } .gadv-mortgage-card h3 { margin: 0 0 8px; color: #092f62; font-size: 22px; line-height: 1.3; } .gadv-mortgage-card p { margin: 0; color: #596a7d; font-size: 16px; } .gadv-mortgage-card p strong { color: #b97800; } .gadv-mortgage-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 45px; padding: 28px 32px; border-radius: 13px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gadv-mortgage-cta strong { display: block; color: #ffffff; font-size: 18px; } .gadv-mortgage-cta span { display: block; margin-top: 3px; color: #cbd9e9; font-size: 15px; } .gadv-mortgage-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; padding: 14px 21px; border-radius: 7px; background: linear-gradient( 135deg, #b97800, #d99a16, #f0b429 ); color: #061d3d !important; text-decoration: none !important; font-size: 16px; font-weight: 800; } .gadv-mortgage-button small { padding-left: 12px; border-left: 1px solid rgba(6,29,61,.3); font-size: 15px; } /* ========================================================= SECTION 3 — SARFAESI ========================================================= */ .gadv-sarfaesi { padding: 105px 0; color: #ffffff; background: radial-gradient( circle at 85% 20%, rgba(217,154,22,.12), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 50%, #092f62 ); } .gadv-sarfaesi-intro { max-width: 820px; } .gadv-sarfaesi-intro h2 { margin: 13px 0 20px; color: #ffffff; font-size: clamp(33px, 4vw, 51px); line-height: 1.15; } .gadv-sarfaesi-intro h2 strong { color: #d99a16; } .gadv-sarfaesi-intro p { color: #d8e4f1; font-size: 17px; } .gadv-sarfaesi-intro p strong { color: #f0b429; } .gadv-sarfaesi-panel { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: stretch; margin-top: 50px; border: 1px solid rgba(240,180,41,.2); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.045); } .gadv-sarfaesi-value { padding: 38px; } .gadv-sarfaesi-value > span { color: #d99a16; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gadv-sarfaesi-value > strong { display: block; margin: 10px 0; color: #ffffff; font-size: 42px; line-height: 1; } .gadv-sarfaesi-value p { margin: 0; color: #cbd9e8; font-size: 16px; } .gadv-sarfaesi-value p strong { color: #f0b429; } .gadv-sarfaesi-highlight { background: linear-gradient( 135deg, rgba(185,120,0,.16), rgba(217,154,22,.06) ); } .gadv-sarfaesi-divider { display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(240,180,41,.15); border-right: 1px solid rgba(240,180,41,.15); } .gadv-sarfaesi-divider span { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 135deg, #b97800, #f0b429 ); color: #061d3d; font-size: 22px; font-weight: 800; } .gadv-sarfaesi-note { margin-top: 22px; padding: 22px 25px; border-left: 3px solid #b97800; background: rgba(255,255,255,.045); } .gadv-sarfaesi-note span { color: #d99a16; font-size: 15px; font-weight: 800; } .gadv-sarfaesi-note p { margin: 5px 0 0; color: #cbd9e8; font-size: 15px; } .gadv-sarfaesi-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 35px; } .gadv-sarfaesi-footer p { margin: 0; color: #c7d6e7; font-size: 15px; } .gadv-sarfaesi-footer a:not(.gadv-sarfaesi-cta) { color: #f0b429; font-weight: 800; } .gadv-sarfaesi-cta { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 14px 21px; border-radius: 7px; background: linear-gradient( 135deg, #b97800, #d99a16, #f0b429 ); color: #061d3d !important; text-decoration: none !important; font-size: 16px; font-weight: 800; } .gadv-sarfaesi-cta small { padding-left: 12px; border-left: 1px solid rgba(6,29,61,.3); font-size: 15px; } /* ========================================================= SECTION 4 — DDA EXPLAINED ========================================================= */ .gadv-dda-explained { padding: 105px 0; background: #ffffff; } .gadv-dda-explained-heading { max-width: 850px; margin-bottom: 55px; } .gadv-dda-explained-heading h2 { margin: 12px 0 18px; color: #092f62; font-size: clamp(33px, 4vw, 51px); line-height: 1.15; } .gadv-dda-explained-heading h2 strong { color: #b97800; } .gadv-dda-explained-heading p { margin: 0; color: #596a7d; font-size: 17px; } .gadv-dda-explained-heading strong { color: #092f62; } .gadv-dda-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .gadv-dda-fact { position: relative; display: flex; gap: 22px; padding: 30px; border: 1px solid #dce5ef; border-radius: 14px; background: #f8fbff; transition: all .3s ease; } .gadv-dda-fact:hover { transform: translateY(-4px); border-color: #d99a16; box-shadow: 0 15px 35px rgba(9,47,98,.09); } .gadv-dda-fact-number { flex: 0 0 46px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 135deg, #b97800, #d99a16, #f0b429 ); color: #061d3d; font-size: 15px; font-weight: 800; } .gadv-dda-fact-content h3 { margin: 0 0 10px; color: #092f62; font-size: 21px; line-height: 1.3; } .gadv-dda-fact-content p { margin: 0; color: #596a7d; font-size: 16px; } .gadv-dda-fact-content strong { color: #b97800; } .gadv-dda-example { margin-top: 18px; padding: 16px 18px; border-left: 3px solid #b97800; background: #ffffff; } .gadv-dda-example strong { display: block; color: #092f62; font-size: 15px; } .gadv-dda-example span { display: block; margin-top: 3px; color: #596a7d; font-size: 15px; } /* ========================================================= SECTION 5 — FREEHOLD VS LEASEHOLD ========================================================= */ .gadv-title-compare { padding: 100px 0; background: #f8fbff; } .gadv-title-heading { max-width: 850px; margin: 0 auto 50px; text-align: center; } .gadv-title-heading h2 { margin: 13px 0 0; color: #092f62; font-size: clamp(33px, 4vw, 50px); line-height: 1.15; } .gadv-title-heading h2 strong { color: #b97800; } .gadv-title-grid { display: grid; grid-template-columns: 1fr 100px 1fr; align-items: stretch; } .gadv-title-card { padding: 38px; border-radius: 14px; background: #ffffff; border: 1px solid #dce5ef; box-shadow: 0 10px 30px rgba(9,47,98,.06); } .gadv-title-card.gadv-title-lease { border-color: #d99a16; box-shadow: 0 12px 35px rgba(185,120,0,.10); } .gadv-title-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 12px; background: #092f62; color: #f0b429; font-size: 23px; font-weight: 800; } .gadv-title-card h3 { margin: 0 0 10px; color: #092f62; font-size: 26px; } .gadv-title-card p { margin: 0; color: #596a7d; font-size: 16px; } .gadv-title-card strong { color: #b97800; } .gadv-title-middle { display: flex; align-items: center; justify-content: center; } .gadv-title-middle span { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 135deg, #b97800, #d99a16, #f0b429 ); color: #061d3d; font-size: 15px; font-weight: 900; } /* ========================================================= SECTION 6 — FINAL CTA ========================================================= */ .gadv-dda-final { position: relative; overflow: hidden; padding: 105px 0; text-align: center; background: radial-gradient( circle at 50% -20%, rgba(217,154,22,.22), transparent 38% ), linear-gradient( 135deg, #04152d, #061d3d 50%, #092f62 ); } .gadv-dda-final::before { content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: -410px; transform: translateX(-50%); border: 1px solid rgba(240,180,41,.18); border-radius: 50%; } .gadv-dda-final-container { position: relative; z-index: 2; } .gadv-dda-final-content { max-width: 820px; margin: 0 auto; } .gadv-dda-final-content h2 { margin: 14px 0 20px; color: #ffffff; font-size: clamp(35px, 5vw, 57px); line-height: 1.12; } .gadv-dda-final-content h2 strong { color: #d99a16; } .gadv-dda-final-content p { max-width: 740px; margin: 0 auto 30px; color: #d5e1ef; font-size: 17px; line-height: 1.85; } .gadv-dda-final-button { display: inline-flex; align-items: center; gap: 15px; padding: 16px 24px; border-radius: 8px; background: linear-gradient( 135deg, #b97800, #d99a16, #f0b429 ); color: #061d3d !important; text-decoration: none !important; box-shadow: 0 14px 32px rgba(0,0,0,.22); transition: all .25s ease; } .gadv-dda-final-button strong { font-size: 17px; } .gadv-dda-final-button small { padding-left: 15px; border-left: 1px solid rgba(6,29,61,.35); font-size: 15px; font-weight: 800; } .gadv-dda-final-button span { font-size: 22px; } .gadv-dda-final-button:hover { transform: translateY(-3px); background: #ffffff; color: #092f62 !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 950px) { .gadv-dda-container { grid-template-columns: 1fr; gap: 45px; } .gadv-dda-hero-badge { max-width: 300px; } .gadv-mortgage-cta, .gadv-sarfaesi-footer { align-items: flex-start; flex-direction: column; } .gadv-sarfaesi-panel { grid-template-columns: 1fr; } .gadv-sarfaesi-divider { min-height: 70px; border-top: 1px solid rgba(240,180,41,.15); border-bottom: 1px solid rgba(240,180,41,.15); border-left: 0; border-right: 0; } .gadv-title-grid { grid-template-columns: 1fr; gap: 20px; } .gadv-title-middle { min-height: 65px; } } @media (max-width: 720px) { .gadv-dda-hero, .gadv-mortgage-map, .gadv-sarfaesi, .gadv-dda-explained, .gadv-title-compare, .gadv-dda-final { padding: 70px 0; } .gadv-mortgage-grid, .gadv-dda-facts { grid-template-columns: 1fr; } .gadv-dda-hero h1 { font-size: 52px; } .gadv-dda-lead { font-size: 18px !important; } .gadv-mortgage-card, .gadv-dda-fact { padding: 24px; } .gadv-mortgage-button, .gadv-sarfaesi-cta, .gadv-dda-primary-cta, .gadv-dda-final-button { width: 100%; justify-content: center; } .gadv-title-card { padding: 28px; } } @media (max-width: 480px) { .gadv-dda-hero h1 { font-size: 45px; } .gadv-dda-hero-badge { padding: 28px 20px; } .gadv-sarfaesi-value { padding: 28px 22px; } .gadv-sarfaesi-value > strong { font-size: 36px; } .gadv-dda-primary-cta { flex-wrap: wrap; gap: 10px; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS CERTIFICATE SELECTOR ROYAL NAVY + GOLD SYSTEM ========================================================= */ .gpvc-selector-hero, .gpvc-selector-intro, .gpvc-category, .gpvc-final { --gpvc-navy: #092f62; --gpvc-navy-dark: #061d3d; --gpvc-navy-deep: #04152d; --gpvc-gold: #b97800; --gpvc-gold-light: #d99a16; --gpvc-gold-bright: #f0b429; --gpvc-light: #f8fbff; --gpvc-border: #d9e2ee; --gpvc-text: #26384d; --gpvc-muted: #5b6b7d; } /* ========================================================= GLOBAL ========================================================= */ .gpvc-selector-hero *, .gpvc-selector-intro *, .gpvc-category *, .gpvc-final * { box-sizing: border-box; } .gpvc-selector-hero, .gpvc-selector-intro, .gpvc-category, .gpvc-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvc-container { width: min(1180px, 92%); margin: 0 auto; } .gpvc-selector-hero strong, .gpvc-selector-intro strong, .gpvc-category strong, .gpvc-final strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .gpvc-selector-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient( circle at 85% 15%, rgba(185,120,0,.24), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #092f62 58%, #061d3d 100% ); } .gpvc-selector-hero:before { content: ""; position: absolute; width: 460px; height: 460px; right: -230px; top: -220px; border: 1px solid rgba(217,154,22,.28); border-radius: 50%; } .gpvc-selector-hero:after { content: ""; position: absolute; width: 310px; height: 310px; right: -155px; top: -145px; border: 1px solid rgba(217,154,22,.18); border-radius: 50%; } .gpvc-hero-content { position: relative; z-index: 2; max-width: 900px; } .gpvc-eyebrow, .gpvc-section-label { display: inline-block; color: #b97800; font-size: 15px; line-height: 1.4; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .gpvc-selector-hero .gpvc-eyebrow { color: #f0b429; } .gpvc-hero-content h1 { margin: 18px 0 22px; color: #ffffff; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -1.8px; } .gpvc-hero-content h1 strong { color: #f0b429; } .gpvc-hero-content h1 span { display: block; color: #e7eef7; font-size: .68em; letter-spacing: -.5px; } .gpvc-hero-content > p { max-width: 800px; margin: 0 0 32px; color: #dbe7f5; font-size: 18px; line-height: 1.85; } .gpvc-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; } .gpvc-hero-meta span { padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 50px; background: rgba(255,255,255,.05); color: #edf4fc; font-size: 15px; } /* ========================================================= BUTTONS ========================================================= */ .gpvc-primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 55px; padding: 14px 27px; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 50%, #f0b429 100% ); color: #061d3d !important; font-size: 16px; line-height: 1.3; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 28px rgba(185,120,0,.22); transition: all .25s ease; } .gpvc-primary-btn span { font-size: 21px; line-height: 1; } .gpvc-primary-btn:hover { background: linear-gradient( 135deg, #092f62, #061d3d ); color: #f0b429 !important; transform: translateY(-3px); box-shadow: 0 15px 32px rgba(4,21,45,.28); } /* ========================================================= SELECTOR INTRO ========================================================= */ .gpvc-selector-intro { padding: 90px 0; background: #f8fbff; } .gpvc-intro-heading { max-width: 760px; margin: 0 auto 48px; text-align: center; } .gpvc-intro-heading h2 { margin: 12px 0 15px; color: #092f62; font-size: clamp(31px, 4vw, 45px); line-height: 1.18; } .gpvc-intro-heading h2 strong { color: #b97800; } .gpvc-intro-heading p { margin: 0; color: #5b6b7d; font-size: 17px; } .gpvc-route-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .gpvc-route-card { position: relative; min-height: 165px; padding: 23px 19px; border: 1px solid #d9e2ee; border-radius: 12px; background: #ffffff; color: #092f62 !important; text-decoration: none !important; box-shadow: 0 7px 25px rgba(9,47,98,.06); transition: all .25s ease; } .gpvc-route-card:hover { border-color: #b97800; transform: translateY(-5px); box-shadow: 0 15px 35px rgba(9,47,98,.12); } .gpvc-route-card > span { display: block; margin-bottom: 15px; color: #b97800; font-size: 15px; font-weight: 800; } .gpvc-route-card strong { display: block; margin-bottom: 7px; color: #092f62; font-size: 19px; line-height: 1.3; } .gpvc-route-card small { display: block; color: #5b6b7d; font-size: 15px; line-height: 1.5; } /* ========================================================= CATEGORY BASE ========================================================= */ .gpvc-category { padding: 95px 0; background: #ffffff; } .gpvc-category:nth-of-type(even) { background: #f8fbff; } .gpvc-category-heading { display: grid; grid-template-columns: 100px 1fr; gap: 30px; align-items: start; max-width: 950px; margin-bottom: 48px; } .gpvc-category-number { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient( 135deg, #061d3d, #092f62 ); color: #f0b429; font-size: 22px; font-weight: 800; box-shadow: 0 10px 25px rgba(9,47,98,.16); } .gpvc-category-heading h2 { margin: 11px 0 14px; color: #092f62; font-size: clamp(31px, 4vw, 47px); line-height: 1.16; } .gpvc-category-heading h2 strong { color: #b97800; } .gpvc-category-heading p { max-width: 780px; margin: 0; color: #5b6b7d; font-size: 17px; } /* ========================================================= CERTIFICATE CARDS ========================================================= */ .gpvc-certificate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .gpvc-certificate-card { position: relative; padding: 31px; border: 1px solid #d9e2ee; border-radius: 14px; background: #ffffff; box-shadow: 0 9px 30px rgba(9,47,98,.06); transition: all .3s ease; } .gpvc-certificate-card:hover { transform: translateY(-5px); border-color: #b97800; box-shadow: 0 18px 40px rgba(9,47,98,.12); } .gpvc-featured-card { border-top: 4px solid #b97800; } .gpvc-card-tag { display: inline-block; margin-bottom: 13px; color: #b97800; font-size: 15px; line-height: 1.4; font-weight: 800; letter-spacing: 1px; } .gpvc-certificate-card h3 { margin: 0 0 14px; color: #092f62; font-size: 24px; line-height: 1.3; } .gpvc-certificate-card p { margin: 0 0 21px; color: #526479; font-size: 16px; line-height: 1.8; } .gpvc-certificate-card p strong { color: #092f62; } .gpvc-card-purpose { padding: 16px 18px; border-left: 3px solid #b97800; background: #f8fbff; } .gpvc-card-purpose strong { display: block; margin-bottom: 4px; color: #b97800 !important; font-size: 15px; } .gpvc-card-purpose span { display: block; color: #526479; font-size: 15px; line-height: 1.55; } /* ========================================================= CATEGORY CTA ========================================================= */ .gpvc-category-cta { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 38px; padding: 24px 27px; border-radius: 12px; background: linear-gradient( 100deg, #061d3d, #092f62 ); } .gpvc-category-cta p { margin: 0; color: #e4edf7; font-size: 16px; } .gpvc-category-cta p strong { color: #f0b429; } /* ========================================================= GIFT / NETWORK NOTE ========================================================= */ .gpvc-network-note { margin-top: 28px; padding: 18px 22px; border: 1px solid #ead8b3; border-radius: 10px; background: #fffaf0; color: #526479; font-size: 15px; } .gpvc-network-note strong { color: #092f62; } .gpvc-network-note a { color: #b97800 !important; font-weight: 800; } /* ========================================================= INSTITUTIONAL ========================================================= */ .gpvc-institutional { background: linear-gradient( 135deg, #061d3d 0%, #092f62 60%, #061d3d 100% ); } .gpvc-institutional .gpvc-category-heading h2, .gpvc-institutional .gpvc-category-heading p { color: #ffffff; } .gpvc-institutional .gpvc-section-label { color: #f0b429; } .gpvc-institutional .gpvc-category-heading h2 strong { color: #f0b429; } .gpvc-institutional .gpvc-category-heading p { color: #d6e2ef; } .gpvc-institutional-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .gpvc-institutional-card { position: relative; padding: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.055); transition: all .25s ease; } .gpvc-institutional-card:hover { border-color: #b97800; background: rgba(255,255,255,.09); transform: translateY(-4px); } .gpvc-institutional-card .gpvc-card-number { display: inline-flex; width: 37px; height: 37px; align-items: center; justify-content: center; margin-right: 8px; border-radius: 50%; background: #b97800; color: #061d3d; font-size: 15px; font-weight: 800; } .gpvc-institutional-card .gpvc-card-tag { display: inline-block; color: #f0b429; } .gpvc-institutional-card h3 { margin: 15px 0 11px; color: #ffffff; font-size: 24px; } .gpvc-institutional-card p { margin: 0; color: #d5e2ef; font-size: 16px; line-height: 1.8; } .gpvc-institutional-card p strong { color: #f0b429; } /* ========================================================= NRI ========================================================= */ .gpvc-nri { background: #f8fbff; } .gpvc-nri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .gpvc-nri-card { padding: 34px; border: 1px solid #d9e2ee; border-radius: 15px; background: #ffffff; box-shadow: 0 10px 32px rgba(9,47,98,.07); } .gpvc-nri-highlight { border-top: 4px solid #b97800; background: linear-gradient( 145deg, #ffffff, #fffaf0 ); } .gpvc-nri-card h3 { margin: 4px 0 15px; color: #092f62; font-size: 26px; line-height: 1.3; } .gpvc-nri-card p { margin: 0; color: #526479; font-size: 16px; line-height: 1.85; } .gpvc-nri-card p strong { color: #092f62; } .gpvc-nri-points { display: grid; gap: 9px; margin-top: 25px; } .gpvc-nri-points span { display: flex; align-items: center; gap: 11px; color: #526479; font-size: 15px; } .gpvc-nri-points b { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: #092f62; color: #f0b429; font-size: 15px; } .gpvc-nri-note { margin-top: 22px; padding: 16px 18px; border-left: 3px solid #b97800; background: #f8fbff; color: #526479; font-size: 15px; } /* ========================================================= FINAL CTA ========================================================= */ .gpvc-final { padding: 100px 0; background: radial-gradient( circle at 50% 0, rgba(185,120,0,.18), transparent 35% ), linear-gradient( 135deg, #04152d, #092f62, #061d3d ); } .gpvc-final-box { max-width: 850px; margin: auto; text-align: center; } .gpvc-final-box .gpvc-section-label { color: #f0b429; } .gpvc-final-box h2 { margin: 14px 0 19px; color: #ffffff; font-size: clamp(34px, 4.5vw, 54px); line-height: 1.15; } .gpvc-final-box h2 strong { color: #f0b429; } .gpvc-final-box p { max-width: 760px; margin: 0 auto 30px; color: #d7e3ef; font-size: 17px; line-height: 1.85; } .gpvc-final-btn { min-height: 60px; padding: 16px 32px; font-size: 17px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1050px) { .gpvc-route-grid { grid-template-columns: repeat(3, 1fr); } .gpvc-certificate-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .gpvc-selector-hero { padding: 80px 0 70px; } .gpvc-category, .gpvc-selector-intro, .gpvc-final { padding: 75px 0; } .gpvc-category-heading { grid-template-columns: 70px 1fr; gap: 20px; } .gpvc-category-number { width: 65px; height: 65px; font-size: 18px; } .gpvc-institutional-grid, .gpvc-nri-grid { grid-template-columns: 1fr; } .gpvc-category-cta { align-items: flex-start; flex-direction: column; } } @media (max-width: 600px) { .gpvc-hero-content h1 { font-size: 40px; } .gpvc-hero-content > p { font-size: 16px; } .gpvc-route-grid, .gpvc-certificate-grid { grid-template-columns: 1fr; } .gpvc-category-heading { grid-template-columns: 1fr; } .gpvc-category-number { width: 58px; height: 58px; } .gpvc-certificate-card, .gpvc-institutional-card, .gpvc-nri-card { padding: 25px; } .gpvc-primary-btn { width: 100%; } .gpvc-category-cta { padding: 22px; } } /* ========================================================= GLOBAL DESIGN SYSTEM ROYAL NAVY + GOLD ========================================================= */ .gpvdc-hero, .gpvdc-intro, .gpvdc-overview, .gpvdc-doc-section, .gpvdc-retrospective, .gpvdc-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvdc-hero *, .gpvdc-intro *, .gpvdc-overview *, .gpvdc-doc-section *, .gpvdc-retrospective *, .gpvdc-final * { box-sizing: border-box; } .gpvdc-container { width: min(1180px, 92%); margin: 0 auto; } .gpvdc-hero strong, .gpvdc-intro strong, .gpvdc-overview strong, .gpvdc-doc-section strong, .gpvdc-retrospective strong, .gpvdc-final strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .gpvdc-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient( circle at 88% 15%, rgba(185,120,0,.20), transparent 28% ), linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .gpvdc-hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -220px; top: -220px; border: 1px solid rgba(185,120,0,.28); border-radius: 50%; } .gpvdc-hero::after { content: ""; position: absolute; width: 290px; height: 290px; right: -155px; top: -155px; border: 1px solid rgba(217,154,22,.18); border-radius: 50%; } .gpvdc-hero-content { position: relative; z-index: 2; max-width: 900px; } .gpvdc-eyebrow, .gpvdc-section-label { display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .gpvdc-hero .gpvdc-eyebrow { color: #d99a16; } .gpvdc-hero h1 { margin: 18px 0 24px; max-width: 850px; color: #ffffff; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -1.5px; } .gpvdc-hero h1 strong { color: #f0b429; } .gpvdc-hero p { max-width: 800px; margin: 0 0 32px; color: #dce8f5; font-size: 19px; line-height: 1.8; } /* ========================================================= PRIMARY CTA ========================================================= */ .gpvdc-primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 56px; padding: 15px 28px; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 50%, #f0b429 100% ); color: #061d3d !important; text-decoration: none !important; font-size: 16px; font-weight: 800; box-shadow: 0 12px 28px rgba(185,120,0,.28); transition: all .25s ease; } .gpvdc-primary-cta span { font-size: 21px; line-height: 1; } .gpvdc-primary-cta:hover { background: linear-gradient( 135deg, #092f62, #061d3d ); color: #ffffff !important; transform: translateY(-3px); box-shadow: 0 15px 32px rgba(4,21,45,.25); } .gpvdc-hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .gpvdc-hero-points span { padding: 8px 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 40px; background: rgba(255,255,255,.05); color: #e4edf7; font-size: 15px; } /* ========================================================= INTRO ========================================================= */ .gpvdc-intro { padding: 55px 0; background: #ffffff; } .gpvdc-intro-box { display: grid; grid-template-columns: 62px 1fr; gap: 24px; align-items: start; padding: 32px; border-left: 4px solid #b97800; border-radius: 0 12px 12px 0; background: #f8fbff; box-shadow: 0 8px 30px rgba(9,47,98,.07); } .gpvdc-intro-mark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#b97800,#d99a16); color: #ffffff; font-size: 24px; font-weight: 800; } .gpvdc-intro-box h2 { margin: 9px 0 12px; color: #092f62; font-size: clamp(27px,4vw,40px); line-height: 1.2; } .gpvdc-intro-box h2 strong { color: #b97800; } .gpvdc-intro-box p { margin: 0; color: #56697e; font-size: 17px; } /* ========================================================= DOCUMENT OVERVIEW ========================================================= */ .gpvdc-overview { padding: 90px 0; background: #f8fbff; } .gpvdc-heading { max-width: 800px; margin: 0 auto 48px; text-align: center; } .gpvdc-heading h2 { margin: 12px 0 15px; color: #092f62; font-size: clamp(32px,4vw,46px); line-height: 1.18; } .gpvdc-heading h2 strong { color: #b97800; } .gpvdc-heading p { margin: 0; color: #5b6b7d; font-size: 17px; } .gpvdc-document-map { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .gpvdc-map-item { padding: 25px 22px; border: 1px solid #dce5ef; border-radius: 12px; background: #ffffff; box-shadow: 0 7px 24px rgba(9,47,98,.05); transition: .25s ease; } .gpvdc-map-item:hover { border-color: #b97800; transform: translateY(-4px); } .gpvdc-map-item span { display: block; margin-bottom: 12px; color: #b97800; font-size: 24px; font-weight: 800; } .gpvdc-map-item strong { display: block; color: #092f62; font-size: 18px; line-height: 1.3; } .gpvdc-map-item small { display: block; margin-top: 7px; color: #68788a; font-size: 15px; } /* ========================================================= DOCUMENT SECTIONS ========================================================= */ .gpvdc-doc-section { padding: 100px 0; background: #ffffff; } .gpvdc-title-docs { background: #ffffff; } .gpvdc-regulatory { background: linear-gradient( 135deg, #f8fbff 0%, #ffffff 60%, #f5f8fc 100% ); } .gpvdc-financial { background: #092f62; } .gpvdc-doc-layout { display: grid; grid-template-columns: 190px 1fr; gap: 65px; align-items: start; } .gpvdc-doc-layout.gpvdc-reverse { grid-template-columns: 1fr 190px; } .gpvdc-doc-layout.gpvdc-reverse .gpvdc-doc-side { order: 2; } .gpvdc-doc-side { position: sticky; top: 40px; } .gpvdc-number { display: block; color: #b97800; font-size: 52px; line-height: 1; font-weight: 800; } .gpvdc-side-label { display: block; margin-top: 10px; color: #092f62; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvdc-financial .gpvdc-side-label { color: #d99a16; } .gpvdc-doc-content { max-width: 900px; } .gpvdc-doc-content h2 { margin: 12px 0 20px; color: #092f62; font-size: clamp(32px,4vw,49px); line-height: 1.15; } .gpvdc-doc-content h2 strong { color: #b97800; } .gpvdc-section-intro { max-width: 780px; margin: 0 0 30px; color: #5b6b7d; font-size: 17px; } .gpvdc-financial .gpvdc-section-label { color: #d99a16; } .gpvdc-financial .gpvdc-doc-content h2 { color: #ffffff; } .gpvdc-financial .gpvdc-doc-content h2 strong { color: #f0b429; } .gpvdc-financial .gpvdc-section-intro { color: #d7e4f2; } /* ========================================================= TITLE CHECKLIST CARDS ========================================================= */ .gpvdc-checklist-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; } .gpvdc-check-card { padding: 27px; border: 1px solid #dbe4ef; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 26px rgba(9,47,98,.05); transition: .25s ease; } .gpvdc-check-card:hover { border-color: #b97800; transform: translateY(-4px); } .gpvdc-check-icon { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; margin-bottom: 17px; border-radius: 50%; background: #092f62; color: #f0b429; font-size: 15px; font-weight: 800; } .gpvdc-check-card h3 { margin: 0 0 9px; color: #092f62; font-size: 20px; line-height: 1.35; } .gpvdc-check-card p { margin: 0; color: #5d6d80; font-size: 16px; } /* ========================================================= REGULATORY LIST ========================================================= */ .gpvdc-regulatory-list { display: grid; gap: 16px; } .gpvdc-regulatory-item { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 24px; border: 1px solid #dbe4ef; border-radius: 11px; background: #ffffff; } .gpvdc-item-number { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 50%; background: #092f62; color: #f0b429; font-size: 15px; font-weight: 800; } .gpvdc-regulatory-item h3 { margin: 0 0 7px; color: #092f62; font-size: 20px; } .gpvdc-regulatory-item p { margin: 0; color: #5b6b7d; font-size: 16px; } /* ========================================================= FINANCIAL CARDS ========================================================= */ .gpvdc-financial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .gpvdc-financial-card { padding: 28px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.06); } .gpvdc-card-symbol { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 8px; background: linear-gradient(135deg,#b97800,#d99a16); color: #061d3d; font-size: 15px; font-weight: 900; } .gpvdc-financial-card h3 { margin: 0 0 10px; color: #ffffff; font-size: 21px; } .gpvdc-financial-card p { margin: 0; color: #d8e5f3; font-size: 16px; } /* ========================================================= RETROSPECTIVE SECTION ========================================================= */ .gpvdc-retrospective { padding: 100px 0; color: #ffffff; background: radial-gradient( circle at 85% 20%, rgba(185,120,0,.17), transparent 28% ), linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .gpvdc-retro-header { max-width: 800px; margin-bottom: 45px; } .gpvdc-retro-header .gpvdc-section-label { color: #d99a16; } .gpvdc-retro-header h2 { margin: 13px 0 17px; color: #ffffff; font-size: clamp(32px,4vw,49px); line-height: 1.15; } .gpvdc-retro-header h2 strong { color: #f0b429; } .gpvdc-retro-header p { margin: 0; color: #d9e6f4; font-size: 17px; } .gpvdc-retro-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .gpvdc-retro-card { padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.055); } .gpvdc-retro-number { color: #f0b429; font-size: 25px; font-weight: 800; } .gpvdc-retro-card h3 { margin: 12px 0 9px; color: #ffffff; font-size: 21px; } .gpvdc-retro-card p { margin: 0; color: #d8e5f3; font-size: 16px; } .gpvdc-retro-note { display: flex; gap: 12px; margin: 30px 0; padding: 20px 24px; border-left: 4px solid #b97800; background: rgba(255,255,255,.06); color: #dce8f5; font-size: 15px; } .gpvdc-retro-note strong { flex: 0 0 auto; color: #f0b429; } .gpvdc-final-button { margin-top: 5px; } /* ========================================================= FINAL CTA ========================================================= */ .gpvdc-final { padding: 100px 0; text-align: center; background: #f8fbff; } .gpvdc-final-inner { max-width: 800px; margin: 0 auto; } .gpvdc-final-inner h2 { margin: 13px 0 18px; color: #092f62; font-size: clamp(34px,4vw,52px); line-height: 1.15; } .gpvdc-final-inner h2 strong { color: #b97800; } .gpvdc-final-inner p { max-width: 720px; margin: 0 auto 30px; color: #5b6b7d; font-size: 17px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 950px) { .gpvdc-document-map { grid-template-columns: repeat(2,1fr); } .gpvdc-doc-layout, .gpvdc-doc-layout.gpvdc-reverse { grid-template-columns: 1fr; gap: 30px; } .gpvdc-doc-layout.gpvdc-reverse .gpvdc-doc-side { order: initial; } .gpvdc-doc-side { position: static; } .gpvdc-financial-grid, .gpvdc-retro-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .gpvdc-hero, .gpvdc-overview, .gpvdc-doc-section, .gpvdc-retrospective, .gpvdc-final { padding: 70px 0; } .gpvdc-hero h1 { font-size: 40px; } .gpvdc-hero p { font-size: 17px; } .gpvdc-intro-box { grid-template-columns: 1fr; padding: 25px; } .gpvdc-document-map, .gpvdc-checklist-grid { grid-template-columns: 1fr; } .gpvdc-regulatory-item { grid-template-columns: 1fr; } .gpvdc-primary-cta { width: 100%; } .gpvdc-hero-points { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .gpvdc-hero-points { grid-template-columns: 1fr; } .gpvdc-hero h1 { font-size: 36px; } .gpvdc-check-card, .gpvdc-financial-card, .gpvdc-retro-card { padding: 23px; } }/* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS CLIENT PROFILES ROYAL NAVY + GOLD DESIGN SYSTEM ========================================================= */ .gpvcp-hero, .gpvcp-overview, .gpvcp-profile, .gpvcp-final { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvcp-hero *, .gpvcp-overview *, .gpvcp-profile *, .gpvcp-final * { box-sizing: border-box; } .gpvcp-container { width: min(1180px, 92%); margin: 0 auto; } .gpvcp-hero strong, .gpvcp-overview strong, .gpvcp-profile strong, .gpvcp-final strong { font-weight: 800; } /* ========================================================= HERO ========================================================= */ .gpvcp-hero { position: relative; overflow: hidden; padding: 105px 0 90px; color: #ffffff; background: radial-gradient( circle at 85% 15%, rgba(185,120,0,.22), transparent 30% ), linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .gpvcp-hero:before { content: ""; position: absolute; width: 390px; height: 390px; right: -190px; top: -190px; border: 1px solid rgba(217,154,22,.35); border-radius: 50%; } .gpvcp-hero:after { content: ""; position: absolute; width: 260px; height: 260px; right: -125px; top: -125px; border: 1px solid rgba(217,154,22,.22); border-radius: 50%; } .gpvcp-hero-content { position: relative; z-index: 2; max-width: 900px; } .gpvcp-eyebrow, .gpvcp-kicker { display: inline-block; color: #b97800; font-size: 15px; line-height: 1.4; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .gpvcp-hero .gpvcp-eyebrow { color: #f0b429; } .gpvcp-hero h1 { max-width: 900px; margin: 17px 0 23px; color: #ffffff; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -1.5px; } .gpvcp-hero h1 strong { color: #f0b429; } .gpvcp-hero p { max-width: 800px; margin: 0 0 30px; color: #dce8f5; font-size: 18px; line-height: 1.8; } .gpvcp-hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; } .gpvcp-hero-points span { padding: 8px 14px; border: 1px solid rgba(217,154,22,.35); border-radius: 50px; color: #f1f6fb; background: rgba(255,255,255,.05); font-size: 15px; } /* ========================================================= CTA SYSTEM ========================================================= */ .gpvcp-cta { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 56px; padding: 14px 23px; border-radius: 7px; text-decoration: none !important; font-size: 16px; font-weight: 800; transition: all .25s ease; } .gpvcp-cta span { font-size: 15px; font-weight: 700; } .gpvcp-cta b { font-size: 20px; line-height: 1; } .gpvcp-cta-gold { color: #092f62 !important; background: linear-gradient( 135deg, #b97800 0%, #d99a16 52%, #f0b429 100% ); box-shadow: 0 12px 30px rgba(185,120,0,.24); } .gpvcp-cta-gold:hover { color: #ffffff !important; background: linear-gradient( 135deg, #061d3d 0%, #092f62 100% ); transform: translateY(-2px); } .gpvcp-cta-navy { color: #ffffff !important; background: linear-gradient( 135deg, #061d3d 0%, #092f62 100% ); box-shadow: 0 10px 25px rgba(9,47,98,.15); } .gpvcp-cta-navy:hover { color: #092f62 !important; background: linear-gradient( 135deg, #b97800 0%, #d99a16 100% ); transform: translateY(-2px); } /* ========================================================= OVERVIEW ========================================================= */ .gpvcp-overview { padding: 95px 0 80px; background: #f8fbff; } .gpvcp-section-heading { max-width: 820px; margin: 0 auto 48px; text-align: center; } .gpvcp-section-heading h2 { margin: 12px 0 18px; color: #092f62; font-size: clamp(30px, 4vw, 45px); line-height: 1.18; } .gpvcp-section-heading h2 strong { color: #b97800; } .gpvcp-section-heading p { margin: 0; color: #53657b; font-size: 17px; } .gpvcp-profile-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .gpvcp-profile-index a { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid #dbe4ef; border-radius: 10px; color: #092f62 !important; background: #ffffff; text-decoration: none !important; font-size: 15px; font-weight: 750; transition: all .25s ease; } .gpvcp-profile-index a:hover { border-color: #b97800; transform: translateY(-3px); } .gpvcp-profile-index span { color: #b97800; font-size: 24px; font-weight: 900; } /* ========================================================= PROFILE BASE ========================================================= */ .gpvcp-profile { padding: 100px 0; } .gpvcp-profile-dark { color: #ffffff; background: linear-gradient( 135deg, #061d3d 0%, #092f62 58%, #04152d 100% ); } .gpvcp-profile-light { color: #26384d; background: #ffffff; } .gpvcp-profile-estate { color: #ffffff; background: radial-gradient( circle at 90% 15%, rgba(185,120,0,.18), transparent 27% ), linear-gradient( 135deg, #061d3d, #092f62 ); } .gpvcp-profile-grid { display: grid; grid-template-columns: 175px 1fr; gap: 60px; align-items: start; } .gpvcp-profile-number { position: sticky; top: 40px; } .gpvcp-profile-number span { display: block; color: #b97800; font-size: 64px; line-height: 1; font-weight: 900; } .gpvcp-profile-number small { display: block; margin-top: 12px; color: #8da6c2; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvcp-profile-main { max-width: 900px; } .gpvcp-profile-main h2 { margin: 13px 0 23px; color: #ffffff; font-size: clamp(31px, 4vw, 48px); line-height: 1.15; } .gpvcp-profile-light .gpvcp-profile-main h2 { color: #092f62; } .gpvcp-profile-main h2 strong { color: #f0b429; } .gpvcp-profile-light .gpvcp-profile-main h2 strong { color: #b97800; } .gpvcp-profile-main > p, .gpvcp-profile-intro p { margin: 0 0 19px; color: #dce7f3; font-size: 17px; line-height: 1.85; } .gpvcp-profile-light .gpvcp-profile-main > p, .gpvcp-profile-light .gpvcp-profile-intro p { color: #53657b; } .gpvcp-profile-dark .gpvcp-profile-main strong, .gpvcp-profile-estate .gpvcp-profile-main strong { color: #f0b429; } .gpvcp-profile-light .gpvcp-profile-main strong { color: #092f62; } /* ========================================================= DATA GRID ========================================================= */ .gpvcp-data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0; } .gpvcp-data-grid > div { min-height: 120px; padding: 19px; border: 1px solid rgba(217,154,22,.2); border-radius: 10px; background: rgba(255,255,255,.055); } .gpvcp-profile-light .gpvcp-data-grid > div { border-color: #dce5ef; background: #f8fbff; } .gpvcp-data-grid small { display: block; margin-bottom: 7px; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1px; } .gpvcp-data-grid strong { display: block; color: #ffffff; font-size: 20px; } .gpvcp-profile-light .gpvfs-data-grid strong, .gpvcp-profile-light .gpvcp-data-grid strong { color: #092f62; } .gpvcp-data-grid span { display: block; margin-top: 4px; color: #9fb4ca; font-size: 15px; } /* ========================================================= EVIDENCE BOX ========================================================= */ .gpvcp-evidence-box { margin: 30px 0; padding: 27px; border-left: 4px solid #b97800; border-radius: 0 12px 12px 0; background: rgba(255,255,255,.06); } .gpvcp-gold-box { background: #f8fbff; border: 1px solid #e5d2a5; border-left: 4px solid #b97800; } .gpvcp-evidence-box h3 { margin: 0 0 10px; color: #f0b429; font-size: 21px; } .gpvcp-gold-box h3 { color: #092f62; } .gpvcp-evidence-box p { margin: 0; color: #dce7f3; font-size: 16px; } .gpvcp-gold-box p { color: #53657b; } .gpvcp-highlight-value { display: inline-flex; flex-direction: column; margin-top: 20px; padding: 15px 20px; border-radius: 8px; background: linear-gradient( 135deg, #b97800, #d99a16, #f0b429 ); } .gpvcp-highlight-value span { color: #092f62; font-size: 15px; font-weight: 800; } .gpvcp-highlight-value strong { color: #092f62 !important; font-size: 28px; } .gpvcp-highlight-value small { color: #092f62; font-size: 15px; } /* ========================================================= METHOD COMPARISON ========================================================= */ .gpvcp-comparison { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 30px 0; } .gpvcp-comparison-heading { grid-column: 1 / -1; padding: 16px 20px; border-bottom: 1px solid rgba(217,154,22,.25); } .gpvcp-comparison-heading span { display: block; color: #b97800; font-size: 15px; font-weight: 800; } .gpvcp-comparison-heading strong { display: block; margin-top: 4px; color: #ffffff !important; font-size: 21px; } .gpvcp-method { padding: 23px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.045); } .gpvcp-method > div { margin-bottom: 13px; } .gpvcp-method > div strong { color: #f0b429 !important; font-size: 20px; } .gpvcp-method > div span { display: block; color: #9fb4ca; font-size: 15px; } .gpvcp-method p { margin: 8px 0; color: #dce7f3; font-size: 15px; } /* ========================================================= RESULT BOX ========================================================= */ .gpvcp-result { margin: 28px 0 30px; padding: 23px 26px; border-radius: 10px; background: #f8fbff; border: 1px solid #e0e7ef; } .gpvcp-result > strong { display: block; margin-bottom: 7px; color: #b97800 !important; font-size: 18px; } .gpvcp-result p { margin: 0; color: #53657b; font-size: 16px; } .gpvcp-result-dark { background: rgba(255,255,255,.06); border-color: rgba(217,154,22,.2); } .gpvcp-result-dark p { color: #dce7f3; } /* ========================================================= FINANCIAL HIGHLIGHT ========================================================= */ .gpvcp-financial-highlight { display: flex; flex-direction: column; margin: 28px 0; padding: 25px; border-radius: 12px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gpvcp-financial-highlight span { color: #dbe7f5; font-size: 15px; } .gpvcp-financial-highlight strong { margin: 5px 0; color: #f0b429 !important; font-size: 34px; } .gpvcp-financial-highlight small { color: #b8cbe0; font-size: 15px; } /* ========================================================= GURUGRAM ANALYSIS ========================================================= */ .gpvcp-analysis-panel { margin: 18px 0; padding: 23px; border: 1px solid rgba(217,154,22,.18); border-radius: 10px; background: rgba(255,255,255,.05); } .gpvcp-analysis-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .gpvcp-analysis-title span { color: #b97800; font-size: 15px; font-weight: 800; } .gpvcp-analysis-title strong { color: #f0b429 !important; font-size: 25px; } .gpvcp-analysis-panel p { margin: 12px 0 0; color: #dce7f3; font-size: 16px; } .gpvcp-adopted { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 25px 0; } .gpvcp-adopted > div { padding: 23px; border-radius: 10px; background: linear-gradient( 135deg, rgba(185,120,0,.16), rgba(9,47,98,.7) ); border: 1px solid rgba(217,154,22,.25); } .gpvcp-adopted span { display: block; color: #b8cbe0; font-size: 15px; font-weight: 800; } .gpvcp-adopted strong { display: block; margin-top: 5px; color: #f0b429 !important; font-size: 30px; } .gpvcp-adopted small { color: #a9bfd5; font-size: 15px; } /* ========================================================= NRI SECTION ========================================================= */ .gpvcp-nri-value { margin: 28px 0; padding: 28px; border: 1px solid #dfcfaa; border-radius: 12px; background: linear-gradient( 135deg, #f8fbff, #ffffff ); } .gpvcp-nri-value span { display: block; color: #b97800; font-size: 15px; font-weight: 800; } .gpvcp-nri-value strong { display: block; color: #092f62 !important; font-size: 36px; } .gpvcp-nri-value div { color: #53657b; font-size: 15px; } .gpvcp-nri-value b { margin: 0 8px; color: #b97800; } .gpvcp-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 25px 0; } .gpvcp-method-card { padding: 25px; border: 1px solid #dce5ef; border-radius: 11px; background: #f8fbff; } .gpvcp-method-card.gpvcp-method-active { border-color: #b97800; box-shadow: 0 10px 30px rgba(185,120,0,.1); } .gpvcp-method-card > span { color: #b97800; font-size: 15px; font-weight: 800; } .gpvcp-method-card > strong { display: block; margin: 5px 0 12px; color: #092f62 !important; font-size: 28px; } .gpvcp-method-card p { margin: 7px 0; color: #53657b; font-size: 15px; } .gpvcp-nri-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 28px 0; } .gpvcp-nri-process div { padding: 17px; border-radius: 9px; background: #f8fbff; border: 1px solid #dce5ef; } .gpvcp-nri-process strong { display: block; color: #b97800 !important; font-size: 21px; } .gpvcp-nri-process span { display: block; margin-top: 5px; color: #092f62; font-size: 15px; font-weight: 700; } /* ========================================================= ESTATE TABLE ========================================================= */ .gpvcp-estate-table { margin: 30px 0; overflow: hidden; border: 1px solid rgba(217,154,22,.24); border-radius: 12px; } .gpvcp-estate-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 15px; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); } .gpvcp-estate-head { background: rgba(185,120,0,.15); } .gpvcp-estate-row span { color: #f0b429; font-size: 15px; font-weight: 800; } .gpvcp-estate-row > strong { color: #ffffff !important; font-size: 19px; } .gpvcp-estate-row small { display: block; margin-top: 4px; color: #9fb4ca; font-size: 15px; font-weight: 400; } .gpvcp-estate-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 20px; background: linear-gradient( 135deg, #b97800, #d99a16 ); } .gpvcp-estate-total span { color: #092f62; font-size: 15px; font-weight: 900; } .gpvcp-estate-total strong { color: #092f62 !important; font-size: 29px; } .gpvcp-estate-explanation { margin: 30px 0; } .gpvcp-estate-explanation h3 { margin: 0 0 12px; color: #f0b429; font-size: 24px; } .gpvcp-estate-explanation p { margin: 0 0 15px; color: #dce7f3; font-size: 16px; } /* ========================================================= FINAL CTA ========================================================= */ .gpvcp-final { padding: 105px 0; text-align: center; color: #ffffff; background: radial-gradient( circle at 50% 0%, rgba(185,120,0,.2), transparent 35% ), linear-gradient( 135deg, #04152d, #092f62 ); } .gpvcp-final-inner { max-width: 820px; margin: 0 auto; } .gpvcp-final h2 { margin: 14px 0 18px; color: #ffffff; font-size: clamp(35px, 5vw, 57px); line-height: 1.1; } .gpvcp-final h2 strong { color: #f0b429; } .gpvcp-final p { max-width: 720px; margin: 0 auto 30px; color: #dce7f3; font-size: 18px; line-height: 1.8; } .gpvcp-final-button { min-height: 60px; padding: 16px 30px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1000px) { .gpvcp-profile-index { grid-template-columns: repeat(2, 1fr); } .gpvcp-data-grid { grid-template-columns: repeat(2, 1fr); } .gpvcp-nri-process { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .gpvcp-profile-grid { grid-template-columns: 1fr; gap: 30px; } .gpvcp-profile-number { position: static; } .gpvcp-profile-number span { font-size: 48px; } } @media (max-width: 650px) { .gpvcp-hero { padding: 75px 0 65px; } .gpvcp-hero h1 { font-size: 39px; } .gpvcp-hero p { font-size: 16px; } .gpvcp-overview, .gpvcp-profile, .gpvcp-final { padding: 70px 0; } .gpvcp-profile-index, .gpvcp-data-grid, .gpvcp-comparison, .gpvcp-adopted, .gpvcp-method-grid, .gpvcp-nri-process { grid-template-columns: 1fr; } .gpvcp-estate-row { grid-template-columns: 1fr; gap: 7px; } .gpvcp-estate-head { display: none; } .gpvcp-estate-total { align-items: flex-start; flex-direction: column; } .gpvcp-analysis-title { align-items: flex-start; flex-direction: column; } .gpvcp-cta { width: 100%; } } /* ========================================================= GOVERNMENT APPROVED PROPERTY VALUERS INSIGHTS PAGE ROYAL NAVY + GOLD SYSTEM ========================================================= */ .gpvi-container { width: min(1180px, 92%); margin: 0 auto; } .gpvi-hero, .gpvi-intro, .gpvi-articles, .gpvi-cta { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.75; } .gpvi-hero *, .gpvi-intro *, .gpvi-articles *, .gpvi-cta * { box-sizing: border-box; } /* ========================================================= HERO ========================================================= */ .gpvi-hero { position: relative; overflow: hidden; padding: 105px 0 95px; color: #ffffff; background: radial-gradient( circle at 85% 15%, rgba(185,120,0,.22), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #092f62 58%, #061d3d 100% ); } .gpvi-hero:before { content: ""; position: absolute; width: 420px; height: 420px; right: -210px; top: -230px; border: 1px solid rgba(217,154,22,.3); border-radius: 50%; } .gpvi-hero:after { content: ""; position: absolute; width: 280px; height: 280px; right: -140px; top: -160px; border: 1px solid rgba(217,154,22,.2); border-radius: 50%; } .gpvi-hero-content { position: relative; z-index: 2; max-width: 900px; } .gpvi-eyebrow, .gpvi-cta-label { display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .gpvi-hero .gpvi-eyebrow { color: #d99a16; } .gpvi-hero h1 { margin: 17px 0 23px; max-width: 900px; color: #ffffff; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -1.6px; font-weight: 700; } .gpvi-hero h1 strong { color: #d99a16; } .gpvi-hero p { max-width: 760px; margin: 0 0 32px; color: #dce8f5; font-size: 19px; line-height: 1.8; } .gpvi-hero p strong { color: #f0b429; } /* ========================================================= PRIMARY CTA ========================================================= */ .gpvi-primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 56px; padding: 15px 28px; border-radius: 7px; background: linear-gradient( 135deg, #b97800 0%, #d99a16 52%, #f0b429 100% ); color: #061d3d !important; font-size: 16px; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 30px rgba(185,120,0,.25); transition: all .25s ease; } .gpvi-primary-cta span { font-size: 21px; line-height: 1; } .gpvi-primary-cta:hover { background: linear-gradient( 135deg, #092f62, #061d3d ); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 15px 35px rgba(4,21,45,.3); } .gpvi-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; } .gpvi-hero-meta span { padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 50px; background: rgba(255,255,255,.05); color: #e2ebf5; font-size: 15px; } /* ========================================================= INTRO ========================================================= */ .gpvi-intro { padding: 90px 0; background: #f8fbff; } .gpvi-intro-grid { display: grid; grid-template-columns: 230px 1fr; gap: 65px; align-items: start; } .gpvi-intro-label { padding-top: 8px; } .gpvi-intro-label span { display: inline-block; padding-left: 16px; border-left: 4px solid #b97800; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.8px; } .gpvi-intro-content { max-width: 850px; } .gpvi-intro-content h2 { margin: 0 0 20px; color: #092f62; font-size: clamp(32px, 4vw, 47px); line-height: 1.15; } .gpvi-intro-content h2 strong { color: #b97800; } .gpvi-intro-content p { margin: 0 0 18px; color: #53657b; font-size: 17px; line-height: 1.85; } .gpvi-intro-content p strong { color: #092f62; font-weight: 800; } /* ========================================================= ARTICLES ========================================================= */ .gpvi-articles { padding: 100px 0; background: #ffffff; } .gpvi-section-heading { max-width: 800px; margin: 0 auto 55px; text-align: center; } .gpvi-section-heading > span { color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 2px; } .gpvi-section-heading h2 { margin: 13px 0 16px; color: #092f62; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; } .gpvi-section-heading h2 strong { color: #b97800; } .gpvi-section-heading p { margin: 0; color: #5b6b7d; font-size: 17px; } .gpvi-article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .gpvi-article-card { position: relative; min-height: 330px; padding: 34px; overflow: hidden; border: 1px solid #dbe4ef; border-radius: 14px; background: #ffffff; box-shadow: 0 8px 28px rgba(9,47,98,.055); transition: all .3s ease; } .gpvi-article-card:before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 0; background: linear-gradient( 180deg, #b97800, #f0b429 ); transition: height .3s ease; } .gpvi-article-card:hover { transform: translateY(-5px); border-color: #c99a3b; box-shadow: 0 18px 42px rgba(9,47,98,.11); } .gpvi-article-card:hover:before { height: 100%; } .gpvi-featured-card { background: linear-gradient( 145deg, #ffffff 0%, #fbfcfe 70%, #f7f1e3 100% ); } .gpvi-article-number { position: absolute; right: 25px; top: 21px; color: #d9e2ed; font-size: 42px; line-height: 1; font-weight: 800; } .gpvi-article-topic { position: relative; z-index: 2; display: inline-block; color: #b97800; font-size: 15px; font-weight: 800; letter-spacing: 1.5px; } .gpvi-article-card h3 { position: relative; z-index: 2; margin: 14px 0 15px; padding-right: 25px; color: #092f62; font-size: 24px; line-height: 1.32; } .gpvi-article-card p { position: relative; z-index: 2; margin: 0 0 20px; color: #596b80; font-size: 16px; line-height: 1.75; } .gpvi-article-card p strong { color: #092f62; } .gpvi-read-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; color: #092f62 !important; font-size: 15px; font-weight: 800; text-decoration: none !important; } .gpvi-read-link:hover { color: #b97800 !important; } .gpvi-read-link span { color: #b97800; font-size: 19px; } /* ========================================================= LANDMARK CARD ========================================================= */ .gpvi-landmark-card { grid-column: span 2; min-height: auto; background: linear-gradient( 135deg, #061d3d 0%, #092f62 72%, #b97800 160% ); border-color: #092f62; } .gpvi-landmark-card .gpvi-article-number { color: rgba(255,255,255,.09); } .gpvi-landmark-card .gpvi-article-topic { color: #d99a16; } .gpvi-landmark-card h3 { color: #ffffff; max-width: 900px; } .gpvi-landmark-card p { color: #dce8f5; max-width: 850px; } .gpvi-landmark-card p strong { color: #f0b429; } .gpvi-landmark-card .gpvi-read-link { color: #ffffff !important; } .gpvi-landmark-card .gpvi-read-link span { color: #d99a16; } /* ========================================================= FINAL CTA ========================================================= */ .gpvi-cta { padding: 100px 0; background: radial-gradient( circle at 50% 0%, rgba(185,120,0,.18), transparent 35% ), linear-gradient( 135deg, #04152d 0%, #092f62 60%, #061d3d 100% ); text-align: center; } .gpvi-cta-inner { max-width: 820px; margin: 0 auto; } .gpvi-cta-label { color: #d99a16; } .gpvi-cta-inner h2 { margin: 14px 0 18px; color: #ffffff; font-size: clamp(34px, 4.5vw, 55px); line-height: 1.12; } .gpvi-cta-inner h2 strong { color: #d99a16; } .gpvi-cta-inner p { max-width: 720px; margin: 0 auto 30px; color: #dce8f5; font-size: 18px; line-height: 1.8; } .gpvi-cta-button { min-height: 60px; padding: 16px 32px; font-size: 17px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .gpvi-intro-grid { grid-template-columns: 1fr; gap: 25px; } .gpvi-article-grid { grid-template-columns: 1fr; } .gpvi-landmark-card { grid-column: span 1; } } @media (max-width: 650px) { .gpvi-hero { padding: 75px 0 70px; } .gpvi-hero h1 { font-size: 39px; } .gpvi-hero p { font-size: 17px; } .gpvi-intro, .gpvi-articles, .gpvi-cta { padding: 70px 0; } .gpvi-article-card { min-height: auto; padding: 27px; } .gpvi-article-card h3 { font-size: 22px; } .gpvi-primary-cta { width: 100%; } } /* ========================================================= DELHI'S VALUATION COMPLEXITY PREMIUM AUTHORITY DESIGN UNIQUE NAMESPACE: gvdx- ROYAL BRAND PALETTE Navy: #092f62 Deep Navy: #061d3d Darkest Navy: #04152d Gold: #b97800 Gold 2: #d99a16 Bright Gold: #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gvdx-intro, .gvdx-characteristic, .gvdx-lutyens, .gvdx-institutional, .gvdx-ncr, .gvdx-capital, .gvdx-final{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gvdx-intro *, .gvdx-characteristic *, .gvdx-lutyens *, .gvdx-institutional *, .gvdx-ncr *, .gvdx-capital *, .gvdx-final *{ box-sizing:border-box; } .gvdx-intro a, .gvdx-characteristic a, .gvdx-lutyens a, .gvdx-institutional a, .gvdx-ncr a, .gvdx-capital a, .gvdx-final a{ text-decoration:none; } /* ========================================================= INTRO ========================================================= */ .gvdx-intro{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 88% 20%, rgba(240,180,41,.13), transparent 29% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gvdx-intro-grid{ position:absolute; top:0; right:12%; width:1px; height:100%; background: linear-gradient( 180deg, transparent, rgba(240,180,41,.22), transparent ); } .gvdx-intro-grid:before, .gvdx-intro-grid:after{ content:""; position:absolute; left:-120px; border:1px solid rgba(240,180,41,.09); border-radius:50%; } .gvdx-intro-grid:before{ top:100px; width:240px; height:240px; } .gvdx-intro-grid:after{ top:210px; left:-175px; width:350px; height:350px; } .gvdx-intro-orbit{ position:absolute; width:600px; height:600px; right:-400px; bottom:-300px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gvdx-intro-inner{ position:relative; z-index:2; max-width:1150px; margin:auto; } .gvdx-kicker{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gvdx-kicker span{ display:block; width:42px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvdx-kicker i{ opacity:.55; font-style:normal; } .gvdx-intro h1{ max-width:1050px; margin:0; color:#ffffff; font-size:clamp(50px,7vw,88px); font-weight:750; line-height:.98; letter-spacing:-4px; } .gvdx-intro h1 span{ display:block; color:#f0b429; } .gvdx-intro h1 small{ display:block; margin-top:21px; color:#ffffff; font-size:clamp(24px,3vw,38px); font-weight:500; line-height:1.2; letter-spacing:-1px; } .gvdx-intro-lead{ max-width:920px; margin:39px 0 0; padding-left:24px; border-left:2px solid #b97800; color:#dbe5ef; font-size:18px; line-height:1.8; } .gvdx-intro-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= FIVE CHARACTERISTIC INDEX ========================================================= */ .gvdx-intro-strip{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:50px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .gvdx-intro-strip div{ display:flex; align-items:center; gap:13px; min-height:100px; padding:15px 17px; border-right:1px solid rgba(255,255,255,.10); } .gvdx-intro-strip div:first-child{ padding-left:0; } .gvdx-intro-strip div:last-child{ border-right:0; } .gvdx-intro-strip strong{ color:#f0b429; font-size:25px; font-weight:900; } .gvdx-intro-strip span{ color:#cdd9e5; font-size:15px; line-height:1.4; } /* ========================================================= COMMON CHAPTER ELEMENTS ========================================================= */ .gvdx-chapter-number{ display:flex; align-items:center; justify-content:center; width:74px; height:74px; flex:none; border:1px solid rgba(185,120,0,.48); border-radius:50%; color:#b97800; font-size:25px; font-weight:900; } .gvdx-chapter-number.navy{ color:#092f62; border-color:rgba(9,47,98,.30); } .gvdx-chapter-number.light{ color:#f0b429; border-color:rgba(240,180,41,.45); } .gvdx-chapter-label{ margin-top:24px; color:#8b6a2b; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gvdx-chapter-label.gold{ color:#f0b429; } .gvdx-chapter-label.navy-label{ color:#b97800; } .gvdx-gold-rule{ width:75px; height:3px; margin:27px 0; background: linear-gradient( 90deg, #b97800, #f0b429 ); } /* ========================================================= CHARACTERISTIC 1 ========================================================= */ .gvdx-zone-section{ padding:105px 0; background:#f8fafc; } .gvdx-chapter-grid{ display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.45fr); gap:80px; align-items:start; } .gvdx-chapter-intro{ position:sticky; top:40px; } .gvdx-chapter-intro h2{ max-width:420px; margin:0; color:#061d3d; font-size:clamp(38px,4vw,57px); line-height:1.05; letter-spacing:-1.8px; } .gvdx-chapter-intro h2 strong{ color:#b97800; } .gvdx-chapter-summary{ max-width:420px; margin:0; color:#526275; font-size:17px; line-height:1.8; } .gvdx-chapter-summary strong{ color:#092f62; } .gvdx-chapter-content > p{ margin:0 0 22px; color:#4f6073; font-size:16px; line-height:1.85; } .gvdx-chapter-content > p strong{ color:#092f62; font-weight:800; } /* ========================================================= ZONE MAP ========================================================= */ .gvdx-zone-map{ margin:34px 0; padding:23px; border:1px solid rgba(9,47,98,.15); border-radius:12px; background:#ffffff; box-shadow:0 16px 35px rgba(6,29,61,.07); } .gvdx-zone-map-heading{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:1px solid rgba(9,47,98,.10); } .gvdx-zone-map-heading span{ color:#697789; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdx-zone-map-heading strong{ color:#b97800; font-size:15px; letter-spacing:1px; } .gvdx-zone-row{ display:grid; grid-template-columns:repeat(8,1fr); gap:7px; margin-top:18px; } .gvdx-zone{ padding:15px 5px; text-align:center; border:1px solid rgba(9,47,98,.10); border-radius:7px; background:#f5f7fa; } .gvdx-zone.active{ border-color:rgba(185,120,0,.45); background: linear-gradient( 145deg, #092f62, #061d3d ); } .gvdx-zone b{ display:block; color:#092f62; font-size:22px; } .gvdx-zone.active b{ color:#f0b429; } .gvdx-zone span{ display:block; margin-top:4px; color:#6e7a88; font-size:15px; } .gvdx-zone.active span{ color:#d5dfe9; } /* ========================================================= HIGHLIGHT ========================================================= */ .gvdx-highlight{ display:flex; align-items:center; gap:20px; margin:31px 0; padding:22px; border-left:4px solid #b97800; border-radius:0 10px 10px 0; background: linear-gradient( 100deg, rgba(9,47,98,.07), rgba(185,120,0,.04) ); } .gvdx-highlight-mark{ display:flex; align-items:center; justify-content:center; width:65px; height:65px; flex:none; border-radius:50%; color:#ffffff; background:#092f62; font-size:18px; font-weight:900; } .gvdx-highlight strong{ display:block; color:#092f62; font-size:20px; } .gvdx-highlight p{ margin:6px 0 0; color:#586779; font-size:15px; line-height:1.65; } .gvdx-highlight p strong{ display:inline; color:#092f62; font-size:15px; } /* ========================================================= EXAMPLE ========================================================= */ .gvdx-example{ margin:33px 0; padding:22px; border-radius:10px; background: linear-gradient( 135deg, #04152d, #092f62 ); } .gvdx-example-label{ margin-bottom:17px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gvdx-example-body{ display:grid; grid-template-columns:1fr 45px 1fr 1fr; align-items:center; gap:15px; } .gvdx-example-body div{ padding:13px 0; } .gvdx-example-body strong{ display:block; color:#ffffff; font-size:28px; } .gvdx-example-body span{ display:block; margin-top:5px; color:#aebdcd; font-size:15px; } .gvdx-example-body > b{ color:#f0b429; text-align:center; font-size:17px; } .gvdx-example-gap{ padding-left:20px !important; border-left:1px solid rgba(240,180,41,.25); } .gvdx-example-gap strong{ color:#f0b429; } .gvdx-note{ padding:18px 20px; border:1px solid rgba(185,120,0,.18); border-radius:8px; background:#ffffff; } /* ========================================================= CHARACTERISTIC 2 — LUTYENS ========================================================= */ .gvdx-lutyens{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 90% 50%, rgba(240,180,41,.10), transparent 35% ), linear-gradient( 135deg, #04152d, #061d3d 58%, #092f62 ); } .gvdx-lutyens-grid{ position:absolute; inset:0; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:65px 65px; opacity:.45; } .gvdx-lutyens-layout{ position:relative; z-index:2; display:grid; grid-template-columns:100px minmax(0,1fr); gap:45px; } .gvdx-lutyens-number{ display:flex; align-items:flex-start; justify-content:center; color:rgba(240,180,41,.16); font-size:105px; font-weight:900; line-height:.8; } .gvdx-lutyens-main{ max-width:1000px; } .gvdx-lutyens-main h2{ margin:0 0 26px; color:#ffffff; font-size:clamp(40px,5vw,64px); line-height:1.04; letter-spacing:-2px; } .gvdx-lutyens-main h2 strong{ color:#f0b429; } .gvdx-lutyens-main p{ color:#d4dfeb; font-size:16px; line-height:1.85; } .gvdx-lutyens-main p strong{ color:#ffffff; } .gvdx-lutyens-lead{ max-width:850px; margin-bottom:25px; font-size:19px !important; } /* ========================================================= METHODOLOGY ========================================================= */ .gvdx-methodology{ margin:39px 0; padding:27px; border:1px solid rgba(240,180,41,.20); border-radius:12px; background:rgba(255,255,255,.035); } .gvdx-method-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10); } .gvdx-method-heading span{ color:#aebdcc; font-size:15px; font-weight:700; letter-spacing:1px; } .gvdx-method-heading strong{ color:#f0b429; font-size:15px; letter-spacing:1.1px; } .gvdx-method-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:20px; background:rgba(240,180,41,.12); } .gvdx-method-card{ padding:23px 20px; background:#061d3d; } .gvdx-method-card > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:17px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdx-method-card h3{ margin:0 0 10px; color:#ffffff; font-size:21px; } .gvdx-method-card p{ margin:0; color:#b9c7d5; font-size:15px; line-height:1.7; } .gvdx-method-card p strong{ color:#ffffff; } /* ========================================================= LUTYENS CALLOUT ========================================================= */ .gvdx-lutyens-callout{ display:flex; flex-direction:column; gap:8px; margin:31px 0; padding:23px 25px; border-left:3px solid #f0b429; background:rgba(240,180,41,.07); } .gvdx-lutyens-callout span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdx-lutyens-callout strong{ color:#ffffff; font-size:21px; line-height:1.45; } /* ========================================================= CHARACTERISTIC 3 — INSTITUTIONAL ========================================================= */ .gvdx-institutional{ padding:110px 0; background: linear-gradient( 180deg, #f8fafc, #eef3f8 ); } .gvdx-institutional-header{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:30px; max-width:1050px; margin-bottom:50px; } .gvdx-institutional-header h2{ margin:0 0 18px; color:#061d3d; font-size:clamp(38px,4.7vw,60px); line-height:1.05; letter-spacing:-1.8px; } .gvdx-institutional-header h2 strong{ color:#b97800; } .gvdx-institutional-header p{ max-width:900px; margin:0; color:#526274; font-size:17px; line-height:1.8; } .gvdx-institutional-header p strong{ color:#092f62; } /* ========================================================= AUTHORITY CARDS ========================================================= */ .gvdx-authority-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .gvdx-authority-card{ position:relative; min-height:320px; padding:28px; border:1px solid rgba(9,47,98,.13); border-radius:12px; background:#ffffff; box-shadow:0 15px 35px rgba(6,29,61,.06); transition: transform .25s ease, border-color .25s ease; } .gvdx-authority-card:hover{ transform:translateY(-5px); border-color:rgba(185,120,0,.40); } .gvdx-authority-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; } .gvdx-authority-top span{ color:#b97800; font-size:15px; font-weight:900; } .gvdx-authority-top strong{ color:#d4dce5; font-size:31px; font-weight:900; } .gvdx-authority-card h3{ margin:0 0 14px; color:#061d3d; font-size:24px; } .gvdx-authority-card p{ margin:0 0 14px; color:#536274; font-size:15px; line-height:1.75; } .gvdx-authority-card p strong{ color:#092f62; } /* ========================================================= TENURE EQUATION ========================================================= */ .gvdx-tenure-equation{ display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:30px; margin-top:35px; padding:27px; border-radius:11px; background: linear-gradient( 135deg, #04152d, #092f62 ); } .gvdx-tenure-equation > div:first-child span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdx-tenure-equation > div:first-child strong{ color:#ffffff; font-size:20px; } .gvdx-equation{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:11px; } .gvdx-equation b{ padding:9px 12px; border:1px solid rgba(240,180,41,.28); border-radius:5px; color:#ffffff; font-size:15px; } .gvdx-equation span{ color:#f0b429; font-size:17px; font-weight:900; } /* ========================================================= CHARACTERISTIC 4 — NCR ========================================================= */ .gvdx-ncr{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 10% 85%, rgba(240,180,41,.10), transparent 30% ), linear-gradient( 135deg, #061d3d, #04152d ); } .gvdx-ncr-glow{ position:absolute; right:-250px; top:100px; width:600px; height:600px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gvdx-ncr-header{ position:relative; z-index:2; display:grid; grid-template-columns:90px minmax(0,1fr); gap:30px; max-width:1050px; margin-bottom:52px; } .gvdx-ncr-header h2{ margin:0 0 18px; color:#ffffff; font-size:clamp(38px,4.7vw,60px); line-height:1.05; letter-spacing:-1.8px; } .gvdx-ncr-header h2 strong{ color:#f0b429; } .gvdx-ncr-header p{ max-width:900px; margin:0; color:#cbd7e4; font-size:17px; line-height:1.8; } .gvdx-ncr-header p strong{ color:#ffffff; } /* ========================================================= NCR GRID ========================================================= */ .gvdx-ncr-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(240,180,41,.15); } .gvdx-ncr-grid article{ min-height:335px; padding:27px 22px; background: linear-gradient( 160deg, #092f62, #061d3d ); } .gvdx-ncr-number{ display:flex; align-items:center; justify-content:center; width:41px; height:41px; margin-bottom:34px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdx-ncr-grid article > span{ display:block; margin-bottom:7px; color:#8ea1b6; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdx-ncr-grid h3{ margin:0 0 14px; color:#ffffff; font-size:26px; } .gvdx-ncr-grid p{ margin:0; color:#c1cedc; font-size:15px; line-height:1.75; } .gvdx-ncr-grid p strong{ color:#ffffff; } /* ========================================================= NCR BRIDGE ========================================================= */ .gvdx-ncr-bridge{ position:relative; z-index:2; display:grid; grid-template-columns:70px minmax(0,1fr); gap:25px; margin-top:45px; } .gvdx-bridge-line{ position:relative; } .gvdx-bridge-line:before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background: linear-gradient( 180deg, #b97800, #f0b429, transparent ); } .gvdx-bridge-content{ max-width:900px; } .gvdx-bridge-content > span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gvdx-bridge-content h3{ margin:10px 0 15px; color:#ffffff; font-size:32px; } .gvdx-bridge-content h3 strong{ color:#f0b429; } .gvdx-bridge-content p{ margin:0 0 15px; color:#bdcad8; font-size:16px; line-height:1.8; } .gvdx-bridge-content p strong{ color:#ffffff; } /* ========================================================= CHARACTERISTIC 5 ========================================================= */ .gvdx-capital{ padding:110px 0; background:#ffffff; } .gvdx-capital-layout{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:50px; } .gvdx-capital-number{ position:relative; } .gvdx-capital-number:after{ content:""; position:absolute; top:95px; left:37px; width:1px; height:calc(100% - 95px); background: linear-gradient( 180deg, #b97800, transparent ); } .gvdx-capital-number span{ display:flex; align-items:center; justify-content:center; width:80px; height:80px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:27px; font-weight:900; } .gvdx-capital-number small{ display:block; margin-top:17px; color:#7b8795; font-size:15px; font-weight:800; letter-spacing:1px; writing-mode:vertical-rl; } .gvdx-capital-content{ max-width:1000px; } .gvdx-capital-content h2{ margin:0 0 22px; color:#061d3d; font-size:clamp(40px,5vw,64px); line-height:1.05; letter-spacing:-2px; } .gvdx-capital-content h2 strong{ color:#b97800; } .gvdx-capital-lead{ max-width:900px; margin:0 0 43px; color:#526274; font-size:19px; line-height:1.8; } .gvdx-capital-lead strong{ color:#092f62; } /* ========================================================= CAPITAL FACTORS ========================================================= */ .gvdx-capital-factors{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(9,47,98,.14); border:1px solid rgba(9,47,98,.14); } .gvdx-capital-factors > div{ min-height:245px; padding:28px; background:#f8fafc; } .gvdx-capital-factors span{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:20px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvdx-capital-factors h3{ margin:0 0 10px; color:#061d3d; font-size:23px; } .gvdx-capital-factors p{ margin:0; color:#566578; font-size:15px; line-height:1.75; } .gvdx-capital-factors p strong{ color:#092f62; } /* ========================================================= DISTRICT PANEL ========================================================= */ .gvdx-district-panel{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:22px; margin-top:36px; padding:29px; border-left:4px solid #b97800; border-radius:0 11px 11px 0; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gvdx-district-mark{ display:flex; align-items:center; justify-content:center; width:65px; height:65px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:18px; font-weight:900; } .gvdx-district-panel span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdx-district-panel h3{ margin:0 0 10px; color:#ffffff; font-size:25px; } .gvdx-district-panel p{ max-width:850px; margin:0; color:#c8d4e1; font-size:15px; line-height:1.75; } .gvdx-district-panel p strong{ color:#ffffff; } /* ========================================================= CAPITAL CONCLUSION ========================================================= */ .gvdx-capital-conclusion{ display:grid; grid-template-columns:55px minmax(0,1fr); gap:20px; margin-top:40px; } .gvdx-conclusion-line{ position:relative; } .gvdx-conclusion-line:before{ content:""; position:absolute; top:5px; bottom:5px; left:50%; width:2px; background: linear-gradient( 180deg, #b97800, #f0b429 ); } .gvdx-capital-conclusion p{ margin:0; color:#3f5063; font-size:17px; line-height:1.85; } .gvdx-capital-conclusion p strong{ color:#092f62; } /* ========================================================= FINAL CTA ========================================================= */ .gvdx-final{ padding:85px 0; color:#ffffff; background: radial-gradient( circle at 85% 50%, rgba(240,180,41,.14), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvdx-final-orbit{ position:absolute; width:500px; height:500px; right:-280px; top:-100px; border:1px solid rgba(240,180,41,.11); border-radius:50%; } .gvdx-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:60px; } .gvdx-final-copy > span{ display:block; margin-bottom:10px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvdx-final-copy h2{ max-width:800px; margin:0 0 17px; color:#ffffff; font-size:clamp(37px,4.7vw,58px); line-height:1.06; letter-spacing:-1.8px; } .gvdx-final-copy h2 strong{ color:#f0b429; } .gvdx-final-copy p{ max-width:800px; margin:0; color:#c9d5e2; font-size:16px; line-height:1.8; } .gvdx-final-copy p strong{ color:#ffffff; } /* ========================================================= FINAL ACTIONS ========================================================= */ .gvdx-final-actions{ display:flex; flex-direction:column; gap:12px; min-width:245px; } .gvdx-final-cta, .gvdx-final-phone{ display:flex; align-items:center; justify-content:center; gap:13px; min-height:64px; border-radius:8px; } .gvdx-final-cta{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 30px rgba(0,0,0,.28); } .gvdx-final-cta:hover{ color:#04152d; } .gvdx-final-cta span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(4,21,45,.12); font-size:18px; } .gvdx-final-cta strong{ font-size:16px; } .gvdx-final-phone{ padding:8px 18px; border:1px solid rgba(240,180,41,.50); color:#ffffff; } .gvdx-final-phone:hover{ color:#ffffff; border-color:#f0b429; } .gvdx-final-phone > span{ color:#f0b429; font-size:18px; } .gvdx-final-phone strong{ display:block; font-size:16px; } .gvdx-final-phone small{ display:block; margin-top:3px; color:#b9c7d5; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1100px){ .gvdx-chapter-grid{ grid-template-columns:.65fr 1.35fr; gap:45px; } .gvdx-ncr-grid{ grid-template-columns:repeat(2,1fr); } .gvdx-intro-strip{ grid-template-columns:repeat(3,1fr); } .gvdx-intro-strip div:nth-child(3){ border-right:0; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gvdx-intro{ padding:80px 0 70px; } .gvdx-intro h1{ font-size:62px; } .gvdx-chapter-grid{ grid-template-columns:1fr; gap:35px; } .gvdx-chapter-intro{ position:relative; top:auto; } .gvdx-chapter-intro h2{ max-width:700px; } .gvdx-lutyens-layout{ grid-template-columns:70px minmax(0,1fr); } .gvdx-method-grid{ grid-template-columns:1fr; } .gvdx-authority-grid{ grid-template-columns:1fr; } .gvdx-tenure-equation{ grid-template-columns:1fr; } .gvdx-capital-layout{ grid-template-columns:90px minmax(0,1fr); gap:30px; } .gvdx-final-inner{ grid-template-columns:1fr; gap:35px; } .gvdx-final-actions{ flex-direction:row; width:100%; } .gvdx-final-cta, .gvdx-final-phone{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gvdx-intro{ padding:62px 0 55px; } .gvdx-intro h1{ font-size:43px; letter-spacing:-1.8px; } .gvdx-intro h1 small{ font-size:25px; } .gvdx-intro-lead{ padding-left:17px; font-size:16px; line-height:1.75; } .gvdx-intro-strip{ grid-template-columns:repeat(2,1fr); } .gvdx-intro-strip div{ min-height:85px; padding:13px; } .gvdx-intro-strip div:nth-child(3){ border-right:1px solid rgba(255,255,255,.10); } .gvdx-intro-strip div:nth-child(even){ border-right:0; } .gvdx-intro-strip strong{ font-size:21px; } .gvdx-zone-section, .gvdx-lutyens, .gvdx-institutional, .gvdx-ncr, .gvdx-capital{ padding:70px 0; } .gvdx-chapter-number{ width:60px; height:60px; font-size:21px; } .gvdx-chapter-intro h2, .gvdx-lutyens-main h2, .gvdx-institutional-header h2, .gvdx-ncr-header h2, .gvdx-capital-content h2{ font-size:36px; } .gvdx-chapter-summary{ font-size:16px; } .gvdx-chapter-content > p, .gvdx-lutyens-main p, .gvdx-institutional-header p, .gvdx-ncr-header p, .gvdx-capital-lead{ font-size:15px; line-height:1.75; } .gvdx-zone-map{ padding:17px 12px; } .gvdx-zone-row{ grid-template-columns:repeat(4,1fr); gap:7px; } .gvdx-zone{ padding:12px 4px; } .gvdx-highlight{ align-items:flex-start; padding:18px; } .gvdx-highlight-mark{ width:54px; height:54px; } .gvdx-example{ padding:18px; } .gvdx-example-body{ grid-template-columns:1fr 35px 1fr; } .gvdx-example-gap{ grid-column:1 / -1; padding:12px 0 0 !important; border-left:0; border-top:1px solid rgba(240,180,41,.20); } .gvdx-lutyens-layout{ grid-template-columns:1fr; gap:20px; } .gvdx-lutyens-number{ justify-content:flex-start; font-size:68px; } .gvdx-methodology{ padding:20px 15px; } .gvdx-method-heading{ display:block; } .gvdx-method-heading strong{ display:block; margin-top:7px; } .gvdx-institutional-header, .gvdx-ncr-header{ grid-template-columns:1fr; gap:22px; } .gvdx-authority-card{ min-height:auto; padding:23px; } .gvdx-tenure-equation{ padding:22px 17px; } .gvdx-equation{ justify-content:flex-start; } .gvdx-ncr-grid{ grid-template-columns:1fr; } .gvdx-ncr-grid article{ min-height:auto; } .gvdx-ncr-bridge{ grid-template-columns:30px minmax(0,1fr); gap:16px; } .gvdx-bridge-content h3{ font-size:27px; } .gvdx-capital-layout{ grid-template-columns:1fr; gap:25px; } .gvdx-capital-number{ display:flex; align-items:center; gap:15px; } .gvdx-capital-number:after{ display:none; } .gvdx-capital-number small{ writing-mode:horizontal-tb; margin:0; } .gvdx-capital-factors{ grid-template-columns:1fr; } .gvdx-capital-factors > div{ min-height:auto; padding:23px; } .gvdx-district-panel{ grid-template-columns:1fr; } .gvdx-capital-conclusion{ grid-template-columns:30px minmax(0,1fr); } .gvdx-final{ padding:65px 0; } .gvdx-final-copy h2{ font-size:36px; } .gvdx-final-copy p{ font-size:15px; } .gvdx-final-actions{ flex-direction:column; } .gvdx-final-cta, .gvdx-final-phone{ width:100%; flex:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gvdx-intro h1{ font-size:36px; } .gvdx-intro h1 small{ font-size:22px; } .gvdx-kicker{ font-size:15px; } .gvdx-zone-row{ grid-template-columns:repeat(2,1fr); } .gvdx-example-body strong{ font-size:23px; } .gvdx-lutyens-main h2, .gvdx-institutional-header h2, .gvdx-ncr-header h2, .gvdx-capital-content h2{ font-size:32px; } .gvdx-method-card{ padding:20px 16px; } .gvdx-ncr-grid article{ padding:23px 18px; } .gvdx-final-copy h2{ font-size:32px; } } /* ========================================================= A2Z VALUERS — THE DELHI PRACTICE UNIQUE NAMESPACE: a2zdp- ROYAL PALETTE #092f62 Primary Navy #061d3d Deep Navy #04152d Dark Navy #b97800 Primary Gold #d99a16 Gold #f0b429 Highlight Gold Minimum font-size: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .a2zdp-practice-intro, .a2zdp-understanding, .a2zdp-credentials{ position:relative; width:100%; overflow:hidden; } .a2zdp-practice-intro *, .a2zdp-understanding *, .a2zdp-credentials *{ box-sizing:border-box; } .a2zdp-practice-intro a, .a2zdp-understanding a, .a2zdp-credentials a{ text-decoration:none; } /* ========================================================= SECTION 01 THE DELHI PRACTICE ========================================================= */ .a2zdp-practice-intro{ padding:105px 0; color:#ffffff; background: radial-gradient( circle at 84% 20%, rgba(240,180,41,.13), transparent 27% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .a2zdp-practice-bg{ position:absolute; inset:0; opacity:.32; background-image: linear-gradient( rgba(240,180,41,.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(240,180,41,.045) 1px, transparent 1px ); background-size:70px 70px; } .a2zdp-practice-orbit{ position:absolute; right:-280px; top:50px; width:650px; height:650px; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .a2zdp-practice-orbit:before{ content:""; position:absolute; inset:85px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .a2zdp-practice-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(350px,.75fr); gap:75px; align-items:center; } .a2zdp-practice-main{ max-width:850px; } .a2zdp-practice-kicker{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; } .a2zdp-practice-kicker span{ width:45px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .a2zdp-practice-kicker i{ opacity:.55; font-style:normal; } .a2zdp-practice-main h1{ margin:0; color:#ffffff; font-size:clamp(48px,5.8vw,76px); font-weight:750; line-height:1; letter-spacing:-3px; } .a2zdp-practice-main h1 strong{ display:block; color:#f0b429; } .a2zdp-practice-lead{ max-width:790px; margin:32px 0 21px; padding-left:22px; border-left:3px solid #b97800; color:#e0e8f0; font-size:19px; line-height:1.8; } .a2zdp-practice-main p:not(.a2zdp-practice-lead){ max-width:790px; margin:0; color:#bfcddb; font-size:16px; line-height:1.85; } .a2zdp-practice-main p strong{ color:#ffffff; } /* ========================================================= ADDRESS ========================================================= */ .a2zdp-practice-address{ display:flex; align-items:center; gap:17px; max-width:790px; margin-top:31px; padding:18px 20px; border:1px solid rgba(240,180,41,.20); border-radius:9px; background:rgba(255,255,255,.035); } .a2zdp-address-mark{ display:flex; align-items:center; justify-content:center; width:55px; height:55px; flex:none; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .a2zdp-practice-address span{ display:block; margin-bottom:4px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .a2zdp-practice-address strong{ display:block; color:#ffffff; font-size:15px; line-height:1.55; } /* ========================================================= ACTIONS ========================================================= */ .a2zdp-practice-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:28px; } .a2zdp-primary-btn, .a2zdp-phone-btn{ display:flex; align-items:center; justify-content:center; min-height:60px; border-radius:8px; } .a2zdp-primary-btn{ gap:11px; padding:0 25px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 30px rgba(0,0,0,.25); font-size:16px; font-weight:850; } .a2zdp-primary-btn span{ display:flex; align-items:center; justify-content:center; width:31px; height:31px; border-radius:50%; background:rgba(4,21,45,.13); } .a2zdp-phone-btn{ gap:11px; padding:7px 20px; border:1px solid rgba(240,180,41,.45); color:#ffffff; } .a2zdp-phone-btn > span{ color:#f0b429; font-size:19px; } .a2zdp-phone-btn strong{ display:block; font-size:16px; } .a2zdp-phone-btn small{ display:block; margin-top:3px; color:#aebdcd; font-size:15px; } /* ========================================================= PRACTICE IDENTITY PANEL ========================================================= */ .a2zdp-practice-panel{ position:relative; padding:30px; border:1px solid rgba(240,180,41,.24); border-radius:16px; background: linear-gradient( 145deg, rgba(9,47,98,.88), rgba(4,21,45,.94) ); box-shadow: 0 35px 70px rgba(0,0,0,.27); } .a2zdp-practice-panel:before{ content:""; position:absolute; top:0; left:25px; right:25px; height:2px; background: linear-gradient( 90deg, transparent, #f0b429, transparent ); } .a2zdp-panel-top{ display:flex; align-items:center; justify-content:space-between; } .a2zdp-panel-top span{ color:#aebdcc; font-size:15px; font-weight:800; letter-spacing:1.2px; } .a2zdp-panel-top strong{ color:#f0b429; font-size:15px; letter-spacing:1.5px; } .a2zdp-panel-center{ display:flex; align-items:center; gap:20px; margin:38px 0; } .a2zdp-panel-ring{ display:flex; align-items:center; justify-content:center; width:105px; height:105px; flex:none; border:1px solid rgba(240,180,41,.50); border-radius:50%; box-shadow: 0 0 0 10px rgba(240,180,41,.035), 0 0 0 20px rgba(240,180,41,.02); } .a2zdp-panel-ring span{ color:#f0b429; font-size:29px; font-weight:950; letter-spacing:-1px; } .a2zdp-panel-copy strong{ display:block; color:#ffffff; font-size:25px; } .a2zdp-panel-copy span{ display:block; max-width:190px; margin-top:6px; color:#aebdcc; font-size:15px; line-height:1.55; } .a2zdp-panel-divider{ height:1px; background:rgba(255,255,255,.10); } .a2zdp-panel-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:25px; background:rgba(240,180,41,.14); } .a2zdp-panel-stats div{ min-height:125px; padding:17px 12px; background:rgba(4,21,45,.65); } .a2zdp-panel-stats strong{ display:block; color:#f0b429; font-size:25px; } .a2zdp-panel-stats span{ display:block; margin-top:6px; color:#b8c7d6; font-size:15px; line-height:1.4; } .a2zdp-panel-foot{ margin-top:22px; padding-top:19px; border-top:1px solid rgba(255,255,255,.08); } .a2zdp-panel-foot span{ display:block; margin-bottom:4px; color:#7f94aa; font-size:15px; font-weight:800; letter-spacing:1px; } .a2zdp-panel-foot strong{ color:#ffffff; font-size:15px; } /* ========================================================= SECTION 02 UNDERSTANDING ========================================================= */ .a2zdp-understanding{ padding:110px 0; background: linear-gradient( 180deg, #ffffff 0%, #f4f7fa 100% ); } .a2zdp-section-heading{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:27px; max-width:1000px; margin-bottom:52px; } .a2zdp-heading-number{ display:flex; align-items:center; justify-content:center; width:65px; height:65px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:21px; font-weight:900; } .a2zdp-section-heading > div:last-child > span{ display:block; margin:7px 0 9px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.3px; } .a2zdp-section-heading h2{ margin:0; color:#061d3d; font-size:clamp(40px,4.8vw,61px); line-height:1.04; letter-spacing:-2px; } .a2zdp-section-heading h2 strong{ color:#b97800; } .a2zdp-section-heading p{ max-width:850px; margin:19px 0 0; color:#566678; font-size:17px; line-height:1.8; } .a2zdp-section-heading p strong{ color:#092f62; } /* ========================================================= KNOWLEDGE GRID ========================================================= */ .a2zdp-knowledge-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .a2zdp-knowledge-card{ position:relative; display:grid; grid-template-columns:58px minmax(0,1fr); gap:20px; min-height:300px; padding:29px; border:1px solid rgba(9,47,98,.12); border-radius:12px; background:#ffffff; box-shadow: 0 15px 35px rgba(6,29,61,.055); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .a2zdp-knowledge-card:hover{ transform:translateY(-5px); border-color:rgba(185,120,0,.38); box-shadow: 0 22px 45px rgba(6,29,61,.10); } .a2zdp-card-featured{ background: linear-gradient( 135deg, #061d3d, #092f62 ); } .a2zdp-card-wide{ grid-column:1 / -1; min-height:260px; } .a2zdp-card-number{ display:flex; align-items:center; justify-content:center; width:47px; height:47px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .a2zdp-card-featured .a2zdp-card-number{ color:#f0b429; border-color:rgba(240,180,41,.45); } .a2zdp-card-content > span{ display:block; margin:4px 0 10px; color:#8a96a4; font-size:15px; font-weight:850; letter-spacing:1.1px; } .a2zdp-card-featured .a2zdp-card-content > span{ color:#f0b429; } .a2zdp-card-content h3{ margin:0 0 14px; color:#061d3d; font-size:25px; line-height:1.2; } .a2zdp-card-featured .a2zdp-card-content h3{ color:#ffffff; } .a2zdp-card-content p{ margin:0; color:#58697b; font-size:15px; line-height:1.78; } .a2zdp-card-featured .a2zdp-card-content p{ color:#c8d5e2; } .a2zdp-card-content p strong{ color:#092f62; } .a2zdp-card-featured .a2zdp-card-content p strong{ color:#ffffff; } .a2zdp-card-keyword{ display:inline-block; margin-top:19px; padding:7px 10px; border:1px solid rgba(185,120,0,.18); border-radius:5px; color:#8a6a2e; background:rgba(185,120,0,.055); font-size:15px; font-weight:750; } .a2zdp-card-featured .a2zdp-card-keyword{ border-color:rgba(240,180,41,.22); color:#f0b429; background:rgba(240,180,41,.06); } /* ========================================================= PRACTICE PRINCIPLE ========================================================= */ .a2zdp-practice-principle{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:23px; align-items:center; margin-top:42px; padding:29px; border-left:4px solid #b97800; border-radius:0 11px 11px 0; background: linear-gradient( 100deg, rgba(9,47,98,.07), rgba(185,120,0,.035) ); } .a2zdp-principle-mark{ display:flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .a2zdp-practice-principle span{ display:block; margin-bottom:6px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.1px; } .a2zdp-practice-principle h3{ margin:0 0 7px; color:#061d3d; font-size:23px; line-height:1.4; } .a2zdp-practice-principle h3 strong{ color:#b97800; } .a2zdp-practice-principle p{ max-width:850px; margin:0; color:#566678; font-size:15px; line-height:1.75; } .a2zdp-practice-principle p strong{ color:#092f62; } /* ========================================================= SECTION 03 CREDENTIALS ========================================================= */ .a2zdp-credentials{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 90% 15%, rgba(240,180,41,.12), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 58%, #092f62 ); } .a2zdp-credentials-grid{ position:absolute; inset:0; opacity:.25; background-image: linear-gradient( rgba(240,180,41,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(240,180,41,.04) 1px, transparent 1px ); background-size:70px 70px; } .a2zdp-credentials-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:70px; align-items:start; } .a2zdp-credentials-main{ max-width:850px; } .a2zdp-credentials-kicker{ display:flex; align-items:center; gap:12px; margin-bottom:24px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .a2zdp-credentials-kicker span{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(240,180,41,.45); border-radius:50%; } .a2zdp-credentials-main h2{ margin:0 0 22px; color:#ffffff; font-size:clamp(40px,4.8vw,61px); line-height:1.05; letter-spacing:-2px; } .a2zdp-credentials-main h2 strong{ color:#f0b429; } .a2zdp-credentials-lead{ max-width:800px; margin:0; color:#c7d4e1; font-size:18px; line-height:1.8; } .a2zdp-credentials-lead strong{ color:#ffffff; } /* ========================================================= CREDENTIAL LIST ========================================================= */ .a2zdp-credentials-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:40px; background:rgba(240,180,41,.14); } .a2zdp-credentials-list div{ min-height:145px; padding:23px; background:rgba(6,29,61,.72); } .a2zdp-credentials-list strong{ display:block; margin-bottom:8px; color:#f0b429; font-size:30px; font-weight:900; } .a2zdp-credentials-list span{ display:block; color:#bdcad7; font-size:15px; line-height:1.6; } /* ========================================================= INSTITUTIONAL NOTE ========================================================= */ .a2zdp-institutional-note{ margin-top:27px; padding:22px 23px; border-left:3px solid #b97800; background:rgba(255,255,255,.035); } .a2zdp-institutional-note > span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .a2zdp-institutional-note p{ margin:0; color:#c0cedb; font-size:15px; line-height:1.75; } .a2zdp-institutional-note p strong{ color:#ffffff; } /* ========================================================= ENGAGEMENT CARD ========================================================= */ .a2zdp-engagement-card{ position:relative; padding:31px; border:1px solid rgba(240,180,41,.27); border-radius:14px; background: linear-gradient( 150deg, rgba(9,47,98,.92), rgba(4,21,45,.96) ); box-shadow: 0 30px 65px rgba(0,0,0,.28); } .a2zdp-engagement-top{ display:flex; align-items:center; justify-content:space-between; } .a2zdp-engagement-top span{ color:#aebdcb; font-size:15px; font-weight:800; letter-spacing:1.2px; } .a2zdp-engagement-top strong{ color:#f0b429; font-size:21px; } .a2zdp-engagement-line{ width:60px; height:2px; margin:28px 0; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .a2zdp-engagement-card h3{ margin:0 0 15px; color:#ffffff; font-size:30px; line-height:1.15; } .a2zdp-engagement-card h3 strong{ color:#f0b429; } .a2zdp-engagement-card > p{ margin:0; color:#c0cedc; font-size:15px; line-height:1.75; } /* ========================================================= ENGAGEMENT POINTS ========================================================= */ .a2zdp-engagement-points{ display:grid; gap:1px; margin:25px 0; background:rgba(240,180,41,.13); } .a2zdp-engagement-points div{ display:flex; align-items:center; gap:10px; padding:12px 13px; background:rgba(4,21,45,.65); } .a2zdp-engagement-points span{ color:#f0b429; font-size:16px; font-weight:900; } .a2zdp-engagement-points strong{ color:#d8e1e9; font-size:15px; } /* ========================================================= ENGAGEMENT CTA ========================================================= */ .a2zdp-engagement-btn{ display:flex; align-items:center; justify-content:space-between; min-height:62px; padding:0 19px; border-radius:7px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 28px rgba(0,0,0,.22); } .a2zdp-engagement-btn strong{ font-size:16px; } .a2zdp-engagement-btn span{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(4,21,45,.13); font-size:18px; } .a2zdp-engagement-phone{ display:flex; align-items:center; gap:12px; margin-top:11px; padding:13px 16px; border:1px solid rgba(240,180,41,.35); border-radius:7px; color:#ffffff; } .a2zdp-engagement-phone > span{ color:#f0b429; font-size:18px; } .a2zdp-engagement-phone strong{ display:block; font-size:16px; } .a2zdp-engagement-phone small{ display:block; margin-top:3px; color:#aebdcb; font-size:15px; } /* ========================================================= ADDRESS ========================================================= */ .a2zdp-engagement-address{ margin-top:21px; padding-top:19px; border-top:1px solid rgba(255,255,255,.09); } .a2zdp-engagement-address span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .a2zdp-engagement-address strong{ display:block; color:#d7e1e9; font-size:15px; line-height:1.55; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .a2zdp-practice-layout, .a2zdp-credentials-layout{ gap:45px; } .a2zdp-practice-main h1{ font-size:60px; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:991px){ .a2zdp-practice-intro, .a2zdp-understanding, .a2zdp-credentials{ padding:80px 0; } .a2zdp-practice-layout, .a2zdp-credentials-layout{ grid-template-columns:1fr; } .a2zdp-practice-main{ max-width:900px; } .a2zdp-practice-panel{ max-width:700px; } .a2zdp-knowledge-grid{ grid-template-columns:1fr; } .a2zdp-card-wide{ grid-column:auto; } .a2zdp-engagement-card{ max-width:650px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:767px){ .a2zdp-practice-intro, .a2zdp-understanding, .a2zdp-credentials{ padding:65px 0; } .a2zdp-practice-layout{ gap:40px; } .a2zdp-practice-main h1{ font-size:43px; letter-spacing:-2px; } .a2zdp-practice-lead{ font-size:16px; padding-left:17px; } .a2zdp-practice-main p:not(.a2zdp-practice-lead){ font-size:15px; } .a2zdp-practice-address{ align-items:flex-start; } .a2zdp-practice-actions{ flex-direction:column; align-items:stretch; } .a2zdp-primary-btn, .a2zdp-phone-btn{ width:100%; } .a2zdp-practice-panel{ padding:23px; } .a2zdp-panel-center{ margin:30px 0; } .a2zdp-panel-stats{ grid-template-columns:1fr; } .a2zdp-panel-stats div{ min-height:auto; } .a2zdp-section-heading{ grid-template-columns:1fr; gap:20px; } .a2zdp-section-heading h2{ font-size:37px; } .a2zdp-section-heading p{ font-size:15px; } .a2zdp-knowledge-card{ grid-template-columns:48px minmax(0,1fr); gap:15px; min-height:auto; padding:22px; } .a2zdp-card-content h3{ font-size:22px; } .a2zdp-practice-principle{ grid-template-columns:1fr; gap:17px; } .a2zdp-credentials-main h2{ font-size:38px; } .a2zdp-credentials-lead{ font-size:16px; } .a2zdp-credentials-list{ grid-template-columns:1fr; } .a2zdp-credentials-list div{ min-height:auto; } .a2zdp-engagement-card{ padding:24px; } .a2zdp-engagement-card h3{ font-size:27px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:480px){ .a2zdp-practice-main h1{ font-size:37px; } .a2zdp-practice-kicker{ font-size:15px; } .a2zdp-panel-ring{ width:82px; height:82px; } .a2zdp-panel-ring span{ font-size:23px; } .a2zdp-panel-copy strong{ font-size:21px; } .a2zdp-section-heading h2{ font-size:32px; } .a2zdp-credentials-main h2{ font-size:32px; } .a2zdp-engagement-card h3{ font-size:24px; } } /* ========================================================= CIVIL SERVICES OFFICERS' INSTITUTE ENGAGEMENT PREMIUM DELHI AUTHORITY DESIGN UNIQUE NAMESPACE: csoi- ROYAL PALETTE #092f62 — Primary Navy #061d3d — Deep Navy #04152d — Dark Navy #b97800 — Primary Gold #d99a16 — Gold #f0b429 — Bright Gold MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .csoi-hero, .csoi-complexity, .csoi-practice{ position:relative; width:100%; overflow:hidden; } .csoi-hero *, .csoi-complexity *, .csoi-practice *{ box-sizing:border-box; } .csoi-hero a, .csoi-complexity a, .csoi-practice a{ text-decoration:none; } /* ========================================================= SECTION 01 HERO ========================================================= */ .csoi-hero{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 85% 20%, rgba(240,180,41,.14), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } /* Background geometry */ .csoi-hero-pattern{ position:absolute; inset:0; opacity:.45; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .csoi-hero-orbit{ position:absolute; right:-250px; top:-190px; width:650px; height:650px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .csoi-hero-orbit:after{ content:""; position:absolute; inset:70px; border:1px solid rgba(240,180,41,.07); border-radius:50%; } /* Main layout */ .csoi-hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr); align-items:center; gap:80px; } /* Left content */ .csoi-hero-content{ max-width:760px; } .csoi-eyebrow{ display:flex; align-items:center; gap:11px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; } .csoi-eyebrow span{ display:block; width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .csoi-hero h1{ margin:0; color:#ffffff; font-size:clamp(48px,6vw,78px); font-weight:760; line-height:1; letter-spacing:-3px; } .csoi-hero h1 strong{ display:block; color:#f0b429; } .csoi-hero-lead{ max-width:760px; margin:32px 0 0; padding-left:22px; border-left:2px solid #b97800; color:#d5e0eb; font-size:18px; line-height:1.8; } .csoi-hero-lead strong{ color:#ffffff; font-weight:750; } /* Location */ .csoi-hero-location{ display:flex; align-items:center; gap:17px; max-width:600px; margin-top:34px; padding:18px; border:1px solid rgba(240,180,41,.20); border-radius:9px; background:rgba(255,255,255,.035); } .csoi-location-mark{ display:flex; align-items:center; justify-content:center; width:57px; height:57px; flex:none; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:16px; font-weight:900; } .csoi-hero-location span{ display:block; margin-bottom:4px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .csoi-hero-location strong{ display:block; color:#ffffff; font-size:17px; } .csoi-hero-location small{ display:block; margin-top:3px; color:#aebdcd; font-size:15px; } /* Credentials */ .csoi-hero-credentials{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:35px; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); } .csoi-hero-credentials div{ padding:18px 15px; border-right:1px solid rgba(255,255,255,.10); } .csoi-hero-credentials div:first-child{ padding-left:0; } .csoi-hero-credentials div:last-child{ border-right:0; } .csoi-hero-credentials strong{ display:block; color:#f0b429; font-size:27px; font-weight:900; } .csoi-hero-credentials span{ display:block; margin-top:4px; color:#b9c7d5; font-size:15px; line-height:1.45; } /* ========================================================= HERO VISUAL ========================================================= */ .csoi-hero-visual{ position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; } .csoi-visual-frame{ position:relative; width:min(100%,500px); min-height:490px; padding:45px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(240,180,41,.32); border-radius:15px; background: linear-gradient( 145deg, rgba(9,47,98,.92), rgba(4,21,45,.97) ); box-shadow: 0 35px 70px rgba(0,0,0,.35); } .csoi-visual-frame:before{ content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; } .csoi-visual-corner{ position:absolute; width:55px; height:55px; } .csoi-corner-tl{ top:28px; left:28px; border-top:2px solid #f0b429; border-left:2px solid #f0b429; } .csoi-corner-br{ right:28px; bottom:28px; border-right:2px solid #f0b429; border-bottom:2px solid #f0b429; } .csoi-visual-monogram{ position:absolute; top:80px; right:45px; color:rgba(240,180,41,.10); font-size:145px; font-weight:900; line-height:.8; } .csoi-visual-title{ position:relative; z-index:2; max-width:360px; } .csoi-visual-title span{ display:block; margin-bottom:13px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .csoi-visual-title strong{ display:block; color:#ffffff; font-size:37px; line-height:1.1; } .csoi-visual-title small{ display:block; margin-top:12px; color:#b8c7d6; font-size:15px; } .csoi-visual-line{ position:relative; z-index:2; width:75px; height:3px; margin:25px 0; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .csoi-visual-label{ position:relative; z-index:2; } .csoi-visual-label span{ display:block; color:#8ea0b3; font-size:15px; font-weight:800; letter-spacing:1.2px; } .csoi-visual-label strong{ display:block; max-width:270px; margin-top:5px; color:#ffffff; font-size:19px; line-height:1.35; } .csoi-visual-badge{ position:absolute; right:-22px; top:65px; min-width:150px; padding:17px 18px; border:1px solid rgba(240,180,41,.45); border-radius:8px; background:#092f62; box-shadow:0 15px 35px rgba(0,0,0,.30); } .csoi-visual-badge span{ display:block; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .csoi-visual-badge strong{ display:block; margin-top:4px; color:#ffffff; font-size:18px; } .csoi-visual-badge small{ display:block; margin-top:3px; color:#b9c7d5; font-size:15px; } /* ========================================================= SECTION 02 COMPLEXITY ========================================================= */ .csoi-complexity{ padding:110px 0; background: linear-gradient( 180deg, #f8fafc 0%, #eef3f8 100% ); } .csoi-section-heading{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:28px; max-width:1050px; margin-bottom:50px; } .csoi-section-number{ display:flex; align-items:center; justify-content:center; width:70px; height:70px; border:1px solid rgba(185,120,0,.40); border-radius:50%; color:#b97800; font-size:23px; font-weight:900; } .csoi-section-label{ margin-bottom:9px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .csoi-section-heading h2{ margin:0 0 18px; color:#061d3d; font-size:clamp(38px,4.8vw,59px); line-height:1.05; letter-spacing:-2px; } .csoi-section-heading h2 strong{ color:#b97800; } .csoi-section-heading p{ max-width:900px; margin:0; color:#536477; font-size:17px; line-height:1.8; } .csoi-section-heading p strong{ color:#092f62; } /* ========================================================= CONTEXT CARDS ========================================================= */ .csoi-context-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .csoi-context-card{ position:relative; min-height:300px; padding:28px; overflow:hidden; border:1px solid rgba(9,47,98,.13); border-radius:12px; background:#ffffff; box-shadow:0 16px 35px rgba(6,29,61,.06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .csoi-context-card:hover{ transform:translateY(-5px); border-color:rgba(185,120,0,.40); box-shadow:0 22px 42px rgba(6,29,61,.10); } .csoi-context-card:after{ content:""; position:absolute; right:-40px; bottom:-45px; width:130px; height:130px; border:1px solid rgba(185,120,0,.08); border-radius:50%; } .csoi-context-number{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:28px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .csoi-context-card > span{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .csoi-context-card h3{ margin:0 0 13px; color:#061d3d; font-size:23px; line-height:1.2; } .csoi-context-card p{ margin:0; color:#566679; font-size:15px; line-height:1.75; } .csoi-context-card p strong{ color:#092f62; } /* Featured card */ .csoi-context-featured{ border-color:rgba(185,120,0,.30); background: linear-gradient( 145deg, #061d3d, #092f62 ); } .csoi-context-featured .csoi-context-number{ color:#061d3d; background:#f0b429; } .csoi-context-featured > span{ color:#f0b429; } .csoi-context-featured h3{ color:#ffffff; } .csoi-context-featured p{ color:#c6d3df; } .csoi-context-featured p strong{ color:#ffffff; } /* ========================================================= PRINCIPLE BAR ========================================================= */ .csoi-principle{ display:grid; grid-template-columns:60px minmax(0,1fr); align-items:center; gap:20px; margin-top:35px; padding:24px 27px; border-left:4px solid #b97800; border-radius:0 10px 10px 0; background: linear-gradient( 100deg, #061d3d, #092f62 ); } .csoi-principle-mark{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:18px; font-weight:900; } .csoi-principle span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .csoi-principle strong{ display:block; color:#ffffff; font-size:19px; line-height:1.45; } /* ========================================================= SECTION 03 PRACTICE ========================================================= */ .csoi-practice{ padding:110px 0 55px; color:#ffffff; background: radial-gradient( circle at 85% 30%, rgba(240,180,41,.13), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .csoi-practice-grid{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:65px 65px; } .csoi-practice-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.82fr); gap:70px; align-items:start; } /* Left */ .csoi-number-light{ color:#f0b429; border-color:rgba(240,180,41,.45); } .csoi-label-light{ margin-top:25px; color:#f0b429; } .csoi-practice-intro h2{ max-width:650px; margin:0 0 23px; color:#ffffff; font-size:clamp(39px,4.8vw,61px); line-height:1.05; letter-spacing:-2px; } .csoi-practice-intro h2 strong{ color:#f0b429; } .csoi-practice-intro > p{ max-width:700px; margin:0 0 19px; color:#c6d3df; font-size:16px; line-height:1.82; } .csoi-practice-intro > p strong{ color:#ffffff; } .csoi-practice-location{ max-width:600px; margin-top:31px; padding:19px 20px; border-left:3px solid #b97800; background:rgba(255,255,255,.045); } .csoi-practice-location span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .csoi-practice-location strong{ display:block; color:#ffffff; font-size:16px; line-height:1.6; } /* ========================================================= PRACTICE PANEL ========================================================= */ .csoi-practice-panel{ position:relative; overflow:hidden; border:1px solid rgba(240,180,41,.25); border-radius:13px; background: linear-gradient( 145deg, rgba(9,47,98,.96), rgba(4,21,45,.98) ); box-shadow:0 30px 65px rgba(0,0,0,.28); } .csoi-practice-panel:before{ content:""; position:absolute; top:-90px; right:-90px; width:230px; height:230px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .csoi-panel-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:25px; border-bottom:1px solid rgba(255,255,255,.10); } .csoi-panel-top span{ color:#9fb0c1; font-size:15px; font-weight:750; letter-spacing:1px; } .csoi-panel-top strong{ color:#f0b429; font-size:15px; letter-spacing:1px; } /* Capability list */ .csoi-capability-list{ position:relative; z-index:2; } .csoi-capability-list > div{ display:grid; grid-template-columns:45px minmax(0,1fr); align-items:center; gap:14px; padding:20px 25px; border-bottom:1px solid rgba(255,255,255,.08); } .csoi-capability-list > div > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(240,180,41,.35); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .csoi-capability-list strong{ display:block; color:#ffffff; font-size:17px; } .csoi-capability-list small{ display:block; margin-top:4px; color:#aebdcc; font-size:15px; line-height:1.45; } /* ========================================================= CTA PANEL ========================================================= */ .csoi-panel-cta{ position:relative; z-index:2; padding:27px 25px; background: linear-gradient( 135deg, rgba(185,120,0,.15), rgba(240,180,41,.06) ); } .csoi-panel-cta > div:first-child span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .csoi-panel-cta > div:first-child strong{ display:block; max-width:450px; color:#ffffff; font-size:19px; line-height:1.45; } /* Actions */ .csoi-actions{ display:flex; gap:10px; margin-top:22px; } .csoi-main-cta, .csoi-phone-cta{ display:flex; align-items:center; justify-content:center; min-height:59px; border-radius:7px; } .csoi-main-cta{ flex:1; gap:11px; padding:8px 16px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow:0 12px 25px rgba(0,0,0,.22); } .csoi-main-cta:hover{ color:#04152d; } .csoi-main-cta > span{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(4,21,45,.12); font-size:18px; } .csoi-main-cta strong{ font-size:16px; } .csoi-phone-cta{ gap:10px; min-width:175px; padding:8px 14px; border:1px solid rgba(240,180,41,.45); color:#ffffff; } .csoi-phone-cta:hover{ color:#ffffff; border-color:#f0b429; } .csoi-phone-cta > span{ color:#f0b429; font-size:18px; } .csoi-phone-cta strong{ display:block; font-size:15px; } .csoi-phone-cta small{ display:block; margin-top:3px; color:#aebdcc; font-size:15px; } /* ========================================================= BOTTOM LINE ========================================================= */ .csoi-bottom-line{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:15px; margin-top:75px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10); } .csoi-bottom-line span{ color:#8294a8; font-size:15px; font-weight:800; letter-spacing:1.2px; } .csoi-bottom-line i{ display:block; width:35px; height:1px; background:#b97800; } .csoi-bottom-line strong{ color:#f0b429; font-size:15px; letter-spacing:1px; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .csoi-hero-grid{ gap:45px; grid-template-columns:minmax(0,1fr) minmax(340px,.8fr); } .csoi-context-grid{ grid-template-columns:repeat(2,1fr); } .csoi-practice-layout{ gap:40px; } } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width:991px){ .csoi-hero{ padding:80px 0; } .csoi-hero-grid{ grid-template-columns:1fr; } .csoi-hero-content{ max-width:850px; } .csoi-hero-visual{ min-height:480px; margin-top:15px; } .csoi-practice-layout{ grid-template-columns:1fr; } .csoi-practice-intro{ max-width:850px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .csoi-hero, .csoi-complexity, .csoi-practice{ padding:65px 0; } .csoi-hero h1{ font-size:44px; letter-spacing:-2px; } .csoi-hero-lead{ font-size:16px; line-height:1.75; } .csoi-hero-credentials{ grid-template-columns:1fr; } .csoi-hero-credentials div, .csoi-hero-credentials div:first-child{ padding:15px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .csoi-hero-credentials div:last-child{ border-bottom:0; } .csoi-hero-visual{ min-height:400px; } .csoi-visual-frame{ min-height:400px; padding:28px; } .csoi-visual-monogram{ font-size:95px; right:25px; top:65px; } .csoi-visual-title strong{ font-size:29px; } .csoi-visual-badge{ right:-7px; top:28px; } .csoi-section-heading{ grid-template-columns:1fr; gap:20px; } .csoi-section-heading h2{ font-size:37px; } .csoi-section-heading p{ font-size:15px; line-height:1.75; } .csoi-context-grid{ grid-template-columns:1fr; } .csoi-context-card{ min-height:auto; } .csoi-principle{ grid-template-columns:1fr; gap:13px; padding:21px; } .csoi-practice-intro h2{ font-size:37px; } .csoi-practice-intro > p{ font-size:15px; line-height:1.75; } .csoi-actions{ flex-direction:column; } .csoi-main-cta, .csoi-phone-cta{ width:100%; } .csoi-bottom-line{ flex-direction:column; gap:8px; text-align:center; } .csoi-bottom-line i{ width:25px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .csoi-hero h1{ font-size:36px; } .csoi-hero-location{ align-items:flex-start; } .csoi-hero-visual{ min-height:360px; } .csoi-visual-frame{ min-height:360px; padding:23px; } .csoi-visual-title strong{ font-size:25px; } .csoi-visual-badge{ position:relative; top:auto; right:auto; align-self:flex-end; margin-top:-45px; margin-right:8px; } .csoi-section-heading h2, .csoi-practice-intro h2{ font-size:32px; } .csoi-context-card{ padding:23px; } .csoi-practice-panel{ border-radius:9px; } .csoi-panel-top{ display:block; } .csoi-panel-top strong{ display:block; margin-top:7px; } .csoi-capability-list > div{ padding:18px; } .csoi-panel-cta{ padding:22px 18px; } } /* ========================================================= DELHI CIRCLE RATE ZONES THE SDV FRAMEWORK UNIQUE NAMESPACE: dcrz- ROYAL PALETTE: #092f62 #061d3d #04152d #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .dcrz-hero, .dcrz-framework, .dcrz-zone-detail, .dcrz-bc, .dcrz-dh, .dcrz-50c, .dcrz-final{ position:relative; width:100%; overflow:hidden; } .dcrz-hero *, .dcrz-framework *, .dcrz-zone-detail *, .dcrz-bc *, .dcrz-dh *, .dcrz-50c *, .dcrz-final *{ box-sizing:border-box; } .dcrz-hero a, .dcrz-framework a, .dcrz-zone-detail a, .dcrz-bc a, .dcrz-dh a, .dcrz-50c a, .dcrz-final a{ text-decoration:none; } /* ========================================================= HERO ========================================================= */ .dcrz-hero{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 82% 22%, rgba(240,180,41,.13), transparent 27% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .dcrz-hero-grid{ position:absolute; inset:0; opacity:.45; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .dcrz-hero-ring{ position:absolute; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .dcrz-ring-one{ width:650px; height:650px; right:-390px; top:-220px; } .dcrz-ring-two{ width:410px; height:410px; right:-245px; top:-100px; } .dcrz-hero-inner{ position:relative; z-index:2; max-width:1160px; margin:auto; } .dcrz-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .dcrz-eyebrow span{ width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .dcrz-eyebrow i{ opacity:.55; font-style:normal; } .dcrz-hero h1{ max-width:1000px; margin:0; color:#ffffff; font-size:clamp(52px,7vw,88px); font-weight:750; line-height:.98; letter-spacing:-4px; } .dcrz-hero h1 span{ display:block; color:#f0b429; } .dcrz-hero h1 small{ display:block; margin-top:22px; color:#ffffff; font-size:clamp(27px,3.5vw,42px); font-weight:450; line-height:1.2; letter-spacing:-1px; } .dcrz-hero-lead{ max-width:850px; margin:36px 0 0; padding-left:23px; border-left:2px solid #b97800; color:#d2deea; font-size:18px; line-height:1.8; } .dcrz-hero-lead strong{ color:#ffffff; font-weight:800; } /* ========================================================= HERO ZONE SPECTRUM ========================================================= */ .dcrz-zone-spectrum{ margin-top:54px; padding:25px; border:1px solid rgba(240,180,41,.20); border-radius:12px; background:rgba(4,21,45,.48); backdrop-filter:blur(7px); } .dcrz-spectrum-heading{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10); } .dcrz-spectrum-heading span{ color:#aebdcc; font-size:15px; font-weight:800; letter-spacing:1.2px; } .dcrz-spectrum-heading strong{ color:#f0b429; font-size:17px; } .dcrz-spectrum-track{ display:grid; grid-template-columns:repeat(8,1fr); gap:7px; margin-top:19px; } .dcrz-spectrum-zone{ position:relative; min-height:90px; padding:15px 5px; text-align:center; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:#092f62; } .dcrz-spectrum-zone.premium{ background: linear-gradient( 145deg, #b97800, #092f62 ); } .dcrz-spectrum-zone.upper{ background: linear-gradient( 145deg, #092f62, #061d3d ); } .dcrz-spectrum-zone.middle{ background:#061d3d; } .dcrz-spectrum-zone.outer{ background:#04152d; } .dcrz-spectrum-zone b{ display:block; color:#f0b429; font-size:29px; line-height:1; } .dcrz-spectrum-zone.premium b{ color:#ffffff; } .dcrz-spectrum-zone small{ display:block; margin-top:9px; color:#c4d1de; font-size:15px; } .dcrz-hero-note{ display:flex; align-items:center; gap:20px; margin-top:20px; } .dcrz-hero-note strong{ color:#f0b429; font-size:16px; } .dcrz-hero-note span{ color:#aebdcd; font-size:15px; } /* ========================================================= COMMON SECTION HEADING ========================================================= */ .dcrz-section-number{ display:flex; align-items:center; justify-content:center; width:68px; height:68px; flex:none; border:1px solid rgba(185,120,0,.40); border-radius:50%; color:#b97800; font-size:22px; font-weight:900; } .dcrz-section-number.dark{ color:#f0b429; border-color:rgba(240,180,41,.40); } .dcrz-section-heading{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:28px; align-items:start; margin-bottom:50px; } .dcrz-section-heading > div:last-child > span, .dcrz-dh-header > div:last-child > span{ display:block; margin-bottom:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .dcrz-section-heading h2, .dcrz-dh-header h2{ max-width:850px; margin:0; color:#061d3d; font-size:clamp(38px,5vw,62px); line-height:1.05; letter-spacing:-2px; } .dcrz-section-heading h2 strong, .dcrz-dh-header h2 strong{ color:#b97800; } /* ========================================================= FRAMEWORK ========================================================= */ .dcrz-framework{ padding:110px 0; background: linear-gradient( 180deg, #f8fafc, #ffffff ); } .dcrz-framework-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.78fr); gap:70px; align-items:center; } .dcrz-framework-main p{ margin:0 0 22px; color:#506173; font-size:17px; line-height:1.85; } .dcrz-framework-main p strong{ color:#092f62; } /* ========================================================= SDV CARD ========================================================= */ .dcrz-sdv-card{ padding:27px; border-radius:13px; color:#ffffff; background: linear-gradient( 145deg, #061d3d, #092f62 ); box-shadow: 0 22px 45px rgba(6,29,61,.16); } .dcrz-sdv-card-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:19px; border-bottom:1px solid rgba(255,255,255,.12); } .dcrz-sdv-card-top span{ color:#f0b429; font-size:26px; font-weight:900; } .dcrz-sdv-card-top small{ color:#aebdcc; font-size:15px; font-weight:800; letter-spacing:1px; } .dcrz-sdv-flow{ display:flex; flex-direction:column; align-items:center; padding-top:21px; } .dcrz-sdv-flow > div{ width:100%; padding:14px 17px; border:1px solid rgba(255,255,255,.10); border-radius:7px; background:rgba(255,255,255,.035); } .dcrz-sdv-flow > div.highlight{ border-color:rgba(240,180,41,.40); background: linear-gradient( 100deg, rgba(185,120,0,.23), rgba(9,47,98,.60) ); } .dcrz-sdv-flow strong{ display:block; color:#ffffff; font-size:16px; } .dcrz-sdv-flow .highlight strong{ color:#f0b429; } .dcrz-sdv-flow span{ display:block; margin-top:4px; color:#aebdcc; font-size:15px; } .dcrz-sdv-flow b{ display:block; margin:7px 0; color:#f0b429; font-size:17px; } /* ========================================================= FRAMEWORK CALLOUT ========================================================= */ .dcrz-section-callout{ display:grid; grid-template-columns:70px minmax(0,1fr); gap:20px; align-items:start; margin-top:50px; padding:27px; border-left:4px solid #b97800; border-radius:0 11px 11px 0; background: linear-gradient( 100deg, rgba(9,47,98,.07), rgba(185,120,0,.04) ); } .dcrz-callout-icon{ display:flex; align-items:center; justify-content:center; width:63px; height:63px; border-radius:50%; color:#ffffff; background:#092f62; font-size:17px; font-weight:900; } .dcrz-section-callout span{ display:block; margin-bottom:6px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.1px; } .dcrz-section-callout strong{ display:block; color:#092f62; font-size:21px; line-height:1.45; } .dcrz-section-callout p{ margin:9px 0 0; color:#586879; font-size:15px; line-height:1.7; } /* ========================================================= ZONE A ========================================================= */ .dcrz-zone-a{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 90% 20%, rgba(240,180,41,.12), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .dcrz-zone-detail-grid{ display:grid; grid-template-columns:125px minmax(0,1fr); gap:50px; } .dcrz-zone-number{ position:relative; } .dcrz-zone-number:after{ content:""; position:absolute; top:95px; left:49px; width:1px; height:calc(100% - 95px); background: linear-gradient( 180deg, #b97800, transparent ); } .dcrz-zone-number span{ display:block; color:#8da0b4; font-size:15px; font-weight:850; letter-spacing:1px; } .dcrz-zone-number strong{ display:block; margin-top:5px; color:#f0b429; font-size:92px; line-height:1; font-weight:900; } .dcrz-zone-label{ margin-bottom:12px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; } .dcrz-zone-detail-content h2{ margin:0 0 22px; color:#ffffff; font-size:clamp(40px,5vw,63px); line-height:1.05; letter-spacing:-2px; } .dcrz-zone-detail-content h2 strong{ color:#f0b429; } .dcrz-zone-lead{ max-width:850px; color:#d1dce8; font-size:19px !important; line-height:1.8 !important; } .dcrz-zone-detail-content p{ color:#bdcad8; font-size:16px; line-height:1.8; } .dcrz-zone-detail-content p strong{ color:#ffffff; } /* ========================================================= LOCALITY PANEL ========================================================= */ .dcrz-locality-panel{ margin:35px 0; padding:24px; border:1px solid rgba(240,180,41,.18); border-radius:11px; background:rgba(255,255,255,.035); } .dcrz-locality-panel > span{ display:block; margin-bottom:18px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .dcrz-locality-list{ display:flex; flex-wrap:wrap; gap:8px; } .dcrz-locality-list b{ padding:9px 12px; border:1px solid rgba(255,255,255,.10); border-radius:5px; color:#dbe4ed; background:rgba(255,255,255,.025); font-size:15px; font-weight:600; } /* ========================================================= ZONE TWO COLUMNS ========================================================= */ .dcrz-zone-two-column{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px; } .dcrz-zone-two-column > div{ padding:24px; border-top:2px solid #b97800; background:rgba(255,255,255,.035); } .dcrz-zone-two-column h3{ margin:0 0 10px; color:#ffffff; font-size:21px; } .dcrz-zone-two-column p{ margin:0; font-size:15px; } /* ========================================================= ZONE HIGHLIGHT ========================================================= */ .dcrz-zone-highlight{ display:flex; flex-direction:column; gap:8px; margin-top:28px; padding:24px; border-left:3px solid #f0b429; background:rgba(240,180,41,.07); } .dcrz-zone-highlight span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.1px; } .dcrz-zone-highlight strong{ color:#ffffff; font-size:20px; line-height:1.5; } /* ========================================================= ZONES B + C ========================================================= */ .dcrz-bc{ padding:110px 0; background:#ffffff; } .dcrz-bc-header{ display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:end; margin-bottom:45px; } .dcrz-bc-header > div > span{ display:block; margin-bottom:11px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.3px; } .dcrz-bc-header h2{ margin:0; color:#061d3d; font-size:clamp(38px,5vw,60px); line-height:1.05; letter-spacing:-2px; } .dcrz-bc-header h2 strong{ color:#b97800; } .dcrz-bc-header p{ margin:0; color:#586879; font-size:16px; line-height:1.8; } /* ========================================================= B/C CARDS ========================================================= */ .dcrz-bc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .dcrz-bc-card{ padding:31px; border:1px solid rgba(9,47,98,.13); border-radius:12px; background:#f8fafc; } .dcrz-bc-card.featured{ border-color:rgba(185,120,0,.38); background: linear-gradient( 145deg, #061d3d, #092f62 ); } .dcrz-bc-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; } .dcrz-bc-card-head span{ color:#7b8795; font-size:15px; font-weight:850; letter-spacing:1px; } .dcrz-bc-card.featured .dcrz-bc-card-head span{ color:#aebdcd; } .dcrz-bc-card-head strong{ color:#b97800; font-size:44px; line-height:1; } .dcrz-bc-card.featured .dcrz-bc-card-head strong{ color:#f0b429; } .dcrz-bc-card h3{ margin:0 0 21px; color:#061d3d; font-size:27px; } .dcrz-bc-card.featured h3{ color:#ffffff; } .dcrz-mini-list{ display:flex; flex-wrap:wrap; gap:7px; } .dcrz-mini-list span{ padding:8px 10px; border:1px solid rgba(9,47,98,.10); border-radius:5px; color:#526274; background:#ffffff; font-size:15px; } .dcrz-bc-card.featured .dcrz-mini-list span{ border-color:rgba(255,255,255,.10); color:#d3dee8; background:rgba(255,255,255,.04); } .dcrz-bc-insight{ margin-top:28px; padding-top:20px; border-top:1px solid rgba(9,47,98,.12); } .dcrz-bc-card.featured .dcrz-bc-insight{ border-color:rgba(255,255,255,.12); } .dcrz-bc-insight strong{ color:#092f62; font-size:16px; } .dcrz-bc-card.featured .dcrz-bc-insight strong{ color:#f0b429; } .dcrz-bc-insight p{ margin:7px 0 0; color:#5c6b7b; font-size:15px; line-height:1.7; } .dcrz-bc-card.featured .dcrz-bc-insight p{ color:#becbd8; } .dcrz-bc-insight p strong{ color:#092f62; } /* ========================================================= VOLUME BANNER ========================================================= */ .dcrz-volume-banner{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:22px; align-items:center; margin-top:30px; padding:25px; border-radius:10px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .dcrz-volume-mark{ display:flex; align-items:center; justify-content:center; width:65px; height:65px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:17px; font-weight:900; } .dcrz-volume-banner span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .dcrz-volume-banner strong{ display:block; color:#ffffff; font-size:21px; } .dcrz-volume-banner p{ margin:7px 0 0; color:#bfcbd8; font-size:15px; line-height:1.7; } .dcrz-volume-banner p strong{ display:inline; color:#ffffff; font-size:15px; } /* ========================================================= D-H SECTION ========================================================= */ .dcrz-dh{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 90% 10%, rgba(240,180,41,.10), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d ); } .dcrz-dh-header{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:28px; margin-bottom:50px; } .dcrz-dh-header h2{ color:#ffffff; } .dcrz-dh-header h2 strong{ color:#f0b429; } .dcrz-dh-header p{ max-width:850px; margin:17px 0 0; color:#c2cfdd; font-size:17px; line-height:1.8; } .dcrz-dh-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(240,180,41,.14); } .dcrz-dh-grid article{ min-height:285px; padding:29px; background: linear-gradient( 150deg, #092f62, #061d3d ); } .dcrz-dh-grid article.dcrz-dh-wide{ grid-column:span 2; min-height:230px; } .dcrz-dh-zone{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:25px; border:1px solid rgba(240,180,41,.38); border-radius:50%; color:#f0b429; font-size:18px; font-weight:900; } .dcrz-dh-grid h3{ margin:0 0 18px; color:#ffffff; font-size:25px; } .dcrz-dh-localities{ display:flex; flex-wrap:wrap; gap:7px; } .dcrz-dh-localities span{ padding:8px 10px; border:1px solid rgba(255,255,255,.10); border-radius:5px; color:#ccd8e4; background:rgba(255,255,255,.025); font-size:15px; } /* ========================================================= LOWER CONTEXT ========================================================= */ .dcrz-lower-context{ margin-top:40px; padding:28px; border:1px solid rgba(240,180,41,.17); border-radius:12px; background:rgba(255,255,255,.025); } .dcrz-lower-context-heading{ padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.10); } .dcrz-lower-context-heading span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.1px; } .dcrz-lower-context-heading h3{ margin:7px 0 0; color:#ffffff; font-size:23px; } .dcrz-lower-context-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:23px; } .dcrz-lower-context-grid > div{ padding:20px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); } .dcrz-lower-context-grid b{ display:block; margin-bottom:12px; color:#f0b429; font-size:15px; } .dcrz-lower-context-grid h4{ margin:0 0 9px; color:#ffffff; font-size:20px; } .dcrz-lower-context-grid p{ margin:0; color:#b9c7d5; font-size:15px; line-height:1.7; } .dcrz-lower-context-grid p strong{ color:#ffffff; } /* ========================================================= SECTION 50C ========================================================= */ .dcrz-50c{ padding:110px 0; color:#ffffff; background: linear-gradient( 180deg, #092f62 0%, #061d3d 60%, #04152d 100% ); } .dcrz-50c-pattern{ position:absolute; inset:0; opacity:.18; background-image: radial-gradient( circle at center, rgba(240,180,41,.28) 1px, transparent 1px ); background-size:28px 28px; } .dcrz-50c-header{ position:relative; z-index:2; display:grid; grid-template-columns:100px minmax(0,1fr); gap:28px; align-items:center; margin-bottom:40px; } .dcrz-50c-number{ display:flex; align-items:center; justify-content:center; width:92px; height:92px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:22px; font-weight:900; } .dcrz-50c-header span{ display:block; margin-bottom:9px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .dcrz-50c-header h2{ max-width:850px; margin:0; color:#ffffff; font-size:clamp(38px,5vw,61px); line-height:1.05; letter-spacing:-2px; } .dcrz-50c-header h2 strong{ color:#f0b429; } .dcrz-50c-intro{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:25px; max-width:1000px; margin-left:120px; } .dcrz-50c-intro p{ margin:0; color:#c5d1de; font-size:16px; line-height:1.8; } .dcrz-50c-intro p strong{ color:#ffffff; } /* ========================================================= SCENARIOS ========================================================= */ .dcrz-50c-scenarios{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:50px; background:rgba(240,180,41,.16); } .dcrz-50c-scenarios article{ min-height:270px; padding:25px 21px; background:rgba(4,21,45,.70); } .dcrz-50c-scenarios article > span{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; margin-bottom:28px; border:1px solid rgba(240,180,41,.35); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .dcrz-50c-scenarios article > strong{ display:block; color:#ffffff; font-size:20px; line-height:1.4; } .dcrz-50c-scenarios p{ margin:12px 0 0; color:#b7c5d3; font-size:15px; line-height:1.7; } .dcrz-50c-scenarios p strong{ color:#ffffff; } /* ========================================================= EVIDENCE FLOW ========================================================= */ .dcrz-evidence-flow{ position:relative; z-index:2; margin-top:45px; padding:27px; border:1px solid rgba(240,180,41,.20); border-radius:11px; background:rgba(255,255,255,.035); } .dcrz-evidence-title{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10); } .dcrz-evidence-title span{ color:#9fb0c1; font-size:15px; font-weight:800; letter-spacing:1.1px; } .dcrz-evidence-title strong{ color:#f0b429; font-size:16px; } .dcrz-evidence-steps{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:24px; } .dcrz-evidence-steps div{ flex:1; min-height:85px; padding:15px; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:rgba(255,255,255,.025); } .dcrz-evidence-steps div.final{ border-color:rgba(240,180,41,.35); } .dcrz-evidence-steps b{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; } .dcrz-evidence-steps span{ color:#d2dce6; font-size:15px; line-height:1.45; } .dcrz-evidence-steps i{ color:#f0b429; font-size:19px; font-style:normal; } /* ========================================================= PRACTICE CTA ========================================================= */ .dcrz-50c-practice{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:50px; align-items:center; margin-top:45px; padding:30px; border-left:4px solid #f0b429; background: linear-gradient( 100deg, rgba(185,120,0,.12), rgba(9,47,98,.45) ); } .dcrz-50c-practice span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .dcrz-50c-practice h3{ margin:0; color:#ffffff; font-size:27px; line-height:1.35; } .dcrz-50c-practice h3 strong{ color:#f0b429; } .dcrz-50c-practice p{ max-width:800px; margin:10px 0 0; color:#c0cedb; font-size:15px; line-height:1.7; } .dcrz-50c-practice p strong{ color:#ffffff; } /* ========================================================= CTA BUTTONS ========================================================= */ .dcrz-practice-actions, .dcrz-final-actions{ display:flex; flex-direction:column; gap:11px; min-width:245px; } .dcrz-primary-cta, .dcrz-final-button{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:62px; padding:10px 19px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 28px rgba(0,0,0,.23); } .dcrz-primary-cta:hover, .dcrz-final-button:hover{ color:#04152d; } .dcrz-primary-cta span, .dcrz-final-button span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0; border-radius:50%; color:#061d3d; background:rgba(4,21,45,.12); font-size:18px; } .dcrz-primary-cta strong, .dcrz-final-button strong{ font-size:16px; } .dcrz-phone-cta, .dcrz-final-call{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:62px; padding:9px 17px; border:1px solid rgba(240,180,41,.45); border-radius:8px; color:#ffffff; } .dcrz-phone-cta:hover, .dcrz-final-call:hover{ color:#ffffff; border-color:#f0b429; } .dcrz-phone-cta > span, .dcrz-final-call > span{ color:#f0b429; font-size:19px; } .dcrz-phone-cta strong, .dcrz-final-call strong{ display:block; font-size:16px; } .dcrz-phone-cta small, .dcrz-final-call small{ display:block; margin-top:3px; color:#b9c7d5; font-size:15px; } /* ========================================================= FINAL CTA ========================================================= */ .dcrz-final{ padding:85px 0; color:#ffffff; background: radial-gradient( circle at 80% 50%, rgba(240,180,41,.14), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .dcrz-final-decoration{ position:absolute; width:520px; height:520px; right:-330px; top:-150px; border:1px solid rgba(240,180,41,.11); border-radius:50%; } .dcrz-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:center; } .dcrz-final-inner > div:first-child > span{ display:block; margin-bottom:9px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .dcrz-final-inner h2{ max-width:850px; margin:0 0 17px; color:#ffffff; font-size:clamp(38px,5vw,60px); line-height:1.05; letter-spacing:-2px; } .dcrz-final-inner h2 strong{ color:#f0b429; } .dcrz-final-inner p{ max-width:820px; margin:0; color:#c4d0dd; font-size:16px; line-height:1.8; } .dcrz-final-inner p strong{ color:#ffffff; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .dcrz-spectrum-track{ grid-template-columns:repeat(4,1fr); } .dcrz-framework-layout{ grid-template-columns:1fr; } .dcrz-50c-scenarios{ grid-template-columns:repeat(2,1fr); } .dcrz-nothing{ display:none; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .dcrz-hero{ padding:80px 0 70px; } .dcrz-hero h1{ font-size:62px; } .dcrz-zone-detail-grid{ grid-template-columns:80px minmax(0,1fr); gap:30px; } .dcrz-zone-number strong{ font-size:70px; } .dcrz-bc-header{ grid-template-columns:1fr; gap:25px; } .dcrz-dh-grid{ grid-template-columns:1fr; } .dcrz-dh-grid article.dcrz-dh-wide{ grid-column:auto; } .dcrz-lower-context-grid{ grid-template-columns:1fr; } .dcrz-50c-intro{ margin-left:0; } .dcrz-final-inner{ grid-template-columns:1fr; gap:35px; } .dcrz-final-actions, .dcrz-practice-actions{ flex-direction:row; width:100%; } .dcrz-primary-cta, .dcrz-phone-cta, .dcrz-final-button, .dcrz-final-call{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .dcrz-hero{ padding:62px 0 55px; } .dcrz-hero h1{ font-size:43px; letter-spacing:-2px; } .dcrz-hero h1 small{ font-size:26px; } .dcrz-hero-lead{ font-size:16px; line-height:1.75; } .dcrz-zone-spectrum{ padding:17px 12px; } .dcrz-spectrum-track{ grid-template-columns:repeat(4,1fr); } .dcrz-spectrum-zone{ min-height:75px; padding:11px 4px; } .dcrz-spectrum-zone b{ font-size:23px; } .dcrz-hero-note{ display:block; } .dcrz-hero-note strong, .dcrz-hero-note span{ display:block; } .dcrz-hero-note span{ margin-top:5px; } .dcrz-framework, .dcrz-zone-a, .dcrz-bc, .dcrz-dh, .dcrz-50c{ padding:75px 0; } .dcrz-section-heading, .dcrz-dh-header{ grid-template-columns:1fr; gap:20px; } .dcrz-section-heading h2, .dcrz-dh-header h2{ font-size:37px; } .dcrz-framework-main p{ font-size:15px; } .dcrz-sdv-card{ padding:21px 16px; } .dcrz-section-callout{ grid-template-columns:1fr; padding:21px; } .dcrz-zone-detail-grid{ grid-template-columns:1fr; gap:20px; } .dcrz-zone-number:after{ display:none; } .dcrz-zone-number{ display:flex; align-items:center; gap:15px; } .dcrz-zone-number strong{ font-size:65px; } .dcrz-zone-detail-content h2{ font-size:37px; } .dcrz-zone-lead{ font-size:17px !important; } .dcrz-zone-two-column{ grid-template-columns:1fr; } .dcrz-bc-header h2{ font-size:37px; } .dcrz-bc-grid{ grid-template-columns:1fr; } .dcrz-bc-card{ padding:24px; } .dcrz-volume-banner{ grid-template-columns:1fr; } .dcrz-dh-header p{ font-size:15px; } .dcrz-dh-grid article{ min-height:auto; } .dcrz-lower-context{ padding:21px 16px; } .dcrz-50c-header{ grid-template-columns:1fr; gap:20px; } .dcrz-50c-header h2{ font-size:37px; } .dcrz-50c-intro{ grid-template-columns:1fr; } .dcrz-50c-scenarios{ grid-template-columns:1fr; } .dcrz-50c-scenarios article{ min-height:auto; } .dcrz-evidence-flow{ padding:21px 15px; } .dcrz-evidence-title{ display:block; } .dcrz-evidence-title strong{ display:block; margin-top:7px; } .dcrz-evidence-steps{ flex-direction:column; align-items:stretch; } .dcrz-evidence-steps div{ min-height:auto; } .dcrz-evidence-steps i{ text-align:center; transform:rotate(90deg); } .dcrz-50c-practice{ grid-template-columns:1fr; gap:27px; padding:23px 18px; } .dcrz-final{ padding:65px 0; } .dcrz-final-inner h2{ font-size:37px; } .dcrz-final-inner p{ font-size:15px; } .dcrz-final-actions, .dcrz-practice-actions{ flex-direction:column; } .dcrz-primary-cta, .dcrz-phone-cta, .dcrz-final-button, .dcrz-final-call{ width:100%; flex:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .dcrz-hero h1{ font-size:36px; } .dcrz-hero h1 small{ font-size:22px; } .dcrz-spectrum-track{ grid-template-columns:repeat(2,1fr); } .dcrz-section-heading h2, .dcrz-dh-header h2, .dcrz-zone-detail-content h2, .dcrz-bc-header h2, .dcrz-50c-header h2, .dcrz-final-inner h2{ font-size:32px; } .dcrz-zone-detail-content p{ font-size:15px; } .dcrz-locality-panel{ padding:19px 14px; } .dcrz-bc-card{ padding:20px 16px; } .dcrz-volume-banner{ padding:20px 16px; } .dcrz-dh-grid article{ padding:22px 17px; } .dcrz-50c-number{ width:76px; height:76px; font-size:20px; } } /* ========================================================= LUTYENS DELHI SPECIALIST PAGE UNIQUE CSS NAMESPACE: gvluty- ROYAL NAVY / GOLD SYSTEM #092f62 #061d3d #04152d #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gvluty-hero, .gvluty-evidence, .gvluty-method, .gvluty-institute, .gvluty-final{ position:relative; width:100%; overflow:hidden; } .gvluty-hero *, .gvluty-evidence *, .gvluty-method *, .gvluty-institute *, .gvluty-final *{ box-sizing:border-box; } .gvluty-hero a, .gvluty-evidence a, .gvluty-method a, .gvluty-institute a, .gvluty-final a{ text-decoration:none; } /* ========================================================= HERO ========================================================= */ .gvluty-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 86% 18%, rgba(240,180,41,.13), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gvluty-hero-grid{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:65px 65px; } .gvluty-hero-ring{ position:absolute; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .gvluty-ring-one{ width:600px; height:600px; right:-360px; top:-150px; } .gvluty-ring-two{ width:430px; height:430px; right:-270px; top:-65px; } .gvluty-hero-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(330px,.7fr); align-items:center; gap:70px; } .gvluty-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; line-height:1.5; } .gvluty-eyebrow > span{ width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvluty-eyebrow i{ color:#8d9bab; font-style:normal; } .gvluty-hero h1{ max-width:920px; margin:0; color:#ffffff; font-size:clamp(48px,6vw,79px); font-weight:760; line-height:1; letter-spacing:-3.5px; } .gvluty-hero h1 strong{ display:block; margin-top:12px; color:#f0b429; font-weight:760; } .gvluty-hero-lead{ max-width:820px; margin:34px 0 0; padding-left:22px; border-left:2px solid #b97800; color:#cedae7; font-size:18px; line-height:1.8; } .gvluty-hero-lead strong{ color:#ffffff; } /* ========================================================= HERO FACTS ========================================================= */ .gvluty-hero-facts{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:43px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gvluty-hero-facts div{ min-height:110px; padding:18px 15px; border-right:1px solid rgba(255,255,255,.10); } .gvluty-hero-facts div:first-child{ padding-left:0; } .gvluty-hero-facts div:last-child{ border-right:0; } .gvluty-hero-facts strong{ display:block; color:#f0b429; font-size:27px; font-weight:900; } .gvluty-hero-facts span{ display:block; margin-top:6px; color:#aebdcd; font-size:15px; line-height:1.45; } /* ========================================================= HERO STATEMENT ========================================================= */ .gvluty-hero-statement{ position:relative; padding:35px 30px; border:1px solid rgba(240,180,41,.26); border-radius:13px; background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ); box-shadow: 0 30px 70px rgba(0,0,0,.22); } .gvluty-statement-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .gvluty-statement-top span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.1px; } .gvluty-statement-top strong{ color:rgba(240,180,41,.45); font-size:27px; } .gvluty-statement-mark{ display:flex; align-items:center; justify-content:center; width:96px; height:96px; margin:45px 0 27px; border:1px solid rgba(240,180,41,.48); border-radius:50%; background:rgba(240,180,41,.05); } .gvluty-statement-mark span{ color:#f0b429; font-size:27px; font-weight:900; } .gvluty-hero-statement h2{ margin:0; color:#ffffff; font-size:30px; line-height:1.25; } .gvluty-hero-statement h2 strong{ color:#f0b429; } .gvluty-hero-statement p{ margin:19px 0 0; color:#b9c7d5; font-size:15px; line-height:1.75; } .gvluty-hero-statement p strong{ color:#ffffff; } /* ========================================================= COMMON SECTION HEADING ========================================================= */ .gvluty-section-heading{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:25px; align-items:start; margin-bottom:55px; } .gvluty-section-number{ display:flex; align-items:center; justify-content:center; width:68px; height:68px; border:1px solid rgba(185,120,0,.42); border-radius:50%; color:#b97800; font-size:22px; font-weight:900; } .gvluty-section-label{ display:block; margin-bottom:12px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvluty-section-label.light{ color:#f0b429; } .gvluty-section-heading h2{ max-width:900px; margin:0; color:#061d3d; font-size:clamp(39px,5vw,62px); line-height:1.04; letter-spacing:-2px; } .gvluty-section-heading h2 strong{ color:#b97800; } /* ========================================================= SECTION 1 — EVIDENCE ========================================================= */ .gvluty-evidence{ padding:110px 0; background: linear-gradient( 180deg, #f9fbfd 0%, #eef3f8 100% ); } .gvluty-evidence-layout{ display:grid; grid-template-columns:.72fr 1.28fr; gap:75px; align-items:center; } /* ========================================================= EVIDENCE VISUAL ========================================================= */ .gvluty-evidence-visual{ position:relative; min-height:470px; display:flex; align-items:center; justify-content:center; } .gvluty-evidence-circle{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:275px; height:275px; border:1px solid rgba(185,120,0,.36); border-radius:50%; background: radial-gradient( circle, #ffffff 0%, #f4f7fa 70%, #e8eef4 100% ); box-shadow: 0 25px 60px rgba(6,29,61,.10); } .gvluty-evidence-circle:before{ content:""; position:absolute; inset:-27px; border:1px dashed rgba(185,120,0,.22); border-radius:50%; } .gvluty-evidence-circle span{ color:#7b8795; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gvluty-evidence-circle strong{ margin:7px 0; color:#092f62; font-size:80px; line-height:1; font-weight:900; } .gvluty-evidence-circle small{ max-width:130px; text-align:center; color:#68788a; font-size:15px; line-height:1.4; } .gvluty-evidence-line{ position:absolute; left:50%; bottom:34px; width:1px; height:75px; background: linear-gradient( 180deg, #b97800, transparent ); } .gvluty-evidence-result{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; white-space:nowrap; } .gvluty-evidence-result strong{ color:#b97800; font-size:17px; } .gvluty-evidence-result span{ color:#677789; font-size:15px; } .gvluty-evidence-tag{ position:absolute; right:0; top:40px; padding:12px 16px; border-radius:7px; background:#092f62; box-shadow:0 15px 30px rgba(6,29,61,.18); } .gvluty-evidence-tag span{ display:block; color:#9fb0c1; font-size:15px; } .gvluty-evidence-tag strong{ display:block; margin-top:3px; color:#f0b429; font-size:15px; } /* ========================================================= EVIDENCE CONTENT ========================================================= */ .gvluty-evidence-content p{ margin:0 0 23px; color:#536274; font-size:16px; line-height:1.85; } .gvluty-evidence-content p strong{ color:#092f62; } .gvluty-large-text{ font-size:20px !important; line-height:1.8 !important; } .gvluty-evidence-alert{ display:grid; grid-template-columns:55px minmax(0,1fr); gap:17px; margin:32px 0; padding:23px; border-left:4px solid #b97800; border-radius:0 10px 10px 0; background:#ffffff; box-shadow:0 12px 30px rgba(6,29,61,.07); } .gvluty-alert-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; color:#ffffff; background:#092f62; font-size:20px; font-weight:900; } .gvluty-evidence-alert strong{ color:#092f62; font-size:20px; } .gvluty-evidence-alert p{ margin:7px 0 0; font-size:15px; } .gvluty-principle{ display:flex; flex-direction:column; gap:8px; margin-top:32px; padding:23px 25px; border-radius:9px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gvluty-principle span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvluty-principle strong{ color:#ffffff !important; font-size:21px; line-height:1.45; } /* ========================================================= SECTION 2 — METHODOLOGY ========================================================= */ .gvluty-method{ padding:115px 0; color:#ffffff; background: radial-gradient( circle at 80% 15%, rgba(240,180,41,.12), transparent 27% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvluty-method-pattern{ position:absolute; inset:0; opacity:.28; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .gvluty-method-heading{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:50px; align-items:center; margin-bottom:52px; } .gvluty-method-heading h2{ margin:0; color:#ffffff; font-size:clamp(40px,5vw,63px); line-height:1.05; letter-spacing:-2px; } .gvluty-method-heading h2 strong{ color:#f0b429; } .gvluty-method-heading p{ max-width:900px; margin:20px 0 0; color:#c6d2df; font-size:17px; line-height:1.8; } .gvluty-method-badge{ display:flex; align-items:center; justify-content:center; gap:13px; width:145px; height:145px; border:1px solid rgba(240,180,41,.40); border-radius:50%; background:rgba(240,180,41,.04); } .gvluty-method-badge span{ color:#f0b429; font-size:45px; font-weight:900; } .gvluty-method-badge small{ color:#b8c5d2; font-size:15px; font-weight:800; line-height:1.35; } /* ========================================================= METHOD CARDS ========================================================= */ .gvluty-layer-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .gvluty-layer-card{ position:relative; padding:28px; border:1px solid rgba(255,255,255,.10); border-radius:11px; background: linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ); } .gvluty-layer-card.featured{ border-color:rgba(240,180,41,.42); background: linear-gradient( 145deg, rgba(240,180,41,.10), rgba(255,255,255,.035) ); transform:translateY(-15px); } .gvluty-layer-top{ display:flex; align-items:center; justify-content:space-between; gap:15px; } .gvluty-layer-top span{ color:#8ea1b4; font-size:15px; font-weight:850; letter-spacing:1px; } .gvluty-layer-top strong{ color:#f0b429; font-size:16px; } .gvluty-layer-number{ margin-top:40px; color:rgba(240,180,41,.18); font-size:72px; line-height:.8; font-weight:900; } .gvluty-layer-card h3{ margin:22px 0 4px; color:#ffffff; font-size:29px; } .gvluty-layer-card h4{ margin:0 0 20px; color:#f0b429; font-size:15px; font-weight:700; } .gvluty-layer-card p{ margin:0 0 17px; color:#bac8d6; font-size:15px; line-height:1.75; } .gvluty-layer-card p strong{ color:#ffffff; } .gvluty-layer-note{ margin-top:23px; padding:15px; border-left:2px solid #b97800; background:rgba(255,255,255,.035); } .gvluty-layer-note span{ display:block; color:#8ea1b4; font-size:15px; font-weight:800; letter-spacing:.8px; } .gvluty-layer-note strong{ display:block; margin-top:5px; color:#f0b429; font-size:15px; line-height:1.45; } /* ========================================================= LOCALITY TAGS ========================================================= */ .gvluty-locality-list{ display:flex; flex-wrap:wrap; gap:7px; margin:22px 0; } .gvluty-locality-list span{ padding:8px 10px; border:1px solid rgba(240,180,41,.20); border-radius:5px; color:#d1dce7; background:rgba(255,255,255,.035); font-size:15px; } /* ========================================================= REFERENCE LIST ========================================================= */ .gvluty-reference-list{ margin:20px 0; padding:0; list-style:none; } .gvluty-reference-list li{ position:relative; margin-bottom:12px; padding-left:21px; color:#bac8d6; font-size:15px; line-height:1.65; } .gvluty-reference-list li:before{ content:""; position:absolute; top:10px; left:0; width:6px; height:6px; border-radius:50%; background:#f0b429; } .gvluty-reference-list li strong{ color:#ffffff; } /* ========================================================= METHOD FLOW ========================================================= */ .gvluty-method-flow{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1.35fr; align-items:center; gap:10px; margin-top:45px; padding:23px; border:1px solid rgba(240,180,41,.18); border-radius:10px; background:rgba(255,255,255,.035); } .gvluty-flow-item{ text-align:center; } .gvluty-flow-item span{ display:block; margin-bottom:5px; color:#8ea1b4; font-size:15px; } .gvluty-flow-item strong{ display:block; color:#ffffff; font-size:16px; } .gvluty-flow-item small{ display:block; margin-top:3px; color:#9eafc0; font-size:15px; } .gvluty-flow-arrow{ color:#f0b429; text-align:center; font-size:23px; font-weight:900; } .gvluty-flow-final{ padding:16px; text-align:center; border:1px solid rgba(240,180,41,.35); border-radius:7px; background:rgba(240,180,41,.07); } .gvluty-flow-final span{ display:block; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvluty-flow-final strong{ display:block; margin-top:4px; color:#ffffff; font-size:17px; } /* ========================================================= DOCUMENTATION PANEL ========================================================= */ .gvluty-documentation{ position:relative; z-index:2; display:grid; grid-template-columns:65px minmax(0,1fr); gap:20px; align-items:start; margin-top:38px; padding:28px; border-left:3px solid #f0b429; border-radius:0 10px 10px 0; background:rgba(240,180,41,.06); } .gvluty-document-icon{ display:flex; align-items:center; justify-content:center; width:55px; height:55px; border-radius:50%; color:#061d3d; background:#f0b429; font-size:21px; font-weight:900; } .gvluty-documentation span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvluty-documentation h3{ margin:7px 0 10px; color:#ffffff; font-size:24px; } .gvluty-documentation p{ max-width:950px; margin:0; color:#c0cedb; font-size:15px; line-height:1.8; } .gvluty-documentation p strong{ color:#ffffff; } /* ========================================================= SECTION 3 — INSTITUTE ========================================================= */ .gvluty-institute{ padding:110px 0; background: linear-gradient( 180deg, #ffffff, #f1f5f9 ); } .gvluty-institute-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start; } .gvluty-institute-identity{ position:sticky; top:35px; } .gvluty-institute-number{ color:#b97800; font-size:95px; font-weight:900; line-height:.8; } .gvluty-institute-identity > span{ display:block; margin-top:27px; color:#092f62; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gvluty-institute-identity h2{ max-width:440px; margin:12px 0 35px; color:#061d3d; font-size:clamp(38px,4.5vw,57px); line-height:1.06; letter-spacing:-1.8px; } .gvluty-institute-identity h2 strong{ color:#b97800; } .gvluty-location-mark{ display:flex; flex-direction:column; gap:4px; max-width:270px; padding:18px; border-left:3px solid #b97800; background:#f8fafc; } .gvluty-location-mark span{ color:#7b8795; font-size:15px; font-weight:800; letter-spacing:1px; } .gvluty-location-mark strong{ color:#092f62; font-size:17px; } /* ========================================================= INSTITUTE CONTENT ========================================================= */ .gvluty-institute-content > p{ margin:0 0 23px; color:#536274; font-size:16px; line-height:1.85; } .gvluty-institute-content > p strong{ color:#092f62; } .gvluty-institute-lead{ font-size:20px !important; } .gvluty-institute-method{ margin:34px 0; border:1px solid rgba(9,47,98,.13); border-radius:11px; background:#ffffff; box-shadow:0 18px 40px rgba(6,29,61,.07); overflow:hidden; } .gvluty-institute-method-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px 22px; border-bottom:1px solid rgba(9,47,98,.10); } .gvluty-institute-method-head span{ color:#68788a; font-size:15px; font-weight:800; letter-spacing:1px; } .gvluty-institute-method-head strong{ color:#b97800; font-size:15px; } .gvluty-institute-method-grid{ display:grid; grid-template-columns:repeat(3,1fr); } .gvluty-institute-method-grid > div{ min-height:150px; padding:22px; border-right:1px solid rgba(9,47,98,.10); } .gvluty-institute-method-grid > div:last-child{ border-right:0; } .gvluty-institute-method-grid b{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:16px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; } .gvluty-institute-method-grid strong{ display:block; color:#061d3d; font-size:18px; } .gvluty-institute-method-grid span{ display:block; margin-top:5px; color:#68788a; font-size:15px; line-height:1.45; } /* ========================================================= INSTITUTE PROOF ========================================================= */ .gvluty-institute-proof{ display:grid; grid-template-columns:65px minmax(0,1fr); gap:18px; margin:33px 0; padding:24px; border-left:4px solid #b97800; border-radius:0 10px 10px 0; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gvluty-proof-icon{ display:flex; align-items:center; justify-content:center; width:55px; height:55px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:17px; font-weight:900; } .gvluty-institute-proof span{ display:block; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvluty-institute-proof strong{ display:block; margin:6px 0; color:#ffffff; font-size:20px; } .gvluty-institute-proof p{ margin:0; color:#c1cfdd; font-size:15px; line-height:1.7; } .gvluty-institute-proof p strong{ display:inline; color:#ffffff; font-size:15px; } /* ========================================================= FINAL CTA ========================================================= */ .gvluty-final{ padding:85px 0; color:#ffffff; background: radial-gradient( circle at 85% 50%, rgba(240,180,41,.14), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvluty-final-lines{ position:absolute; inset:0; opacity:.25; background-image: linear-gradient( 90deg, transparent 49.8%, rgba(240,180,41,.10) 50%, transparent 50.2% ); } .gvluty-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:60px; } .gvluty-final-content > span{ display:block; margin-bottom:11px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gvluty-final-content h2{ max-width:850px; margin:0 0 17px; color:#ffffff; font-size:clamp(38px,4.8vw,60px); line-height:1.05; letter-spacing:-1.8px; } .gvluty-final-content h2 strong{ color:#f0b429; } .gvluty-final-content p{ max-width:800px; margin:0; color:#c6d3e0; font-size:16px; line-height:1.8; } .gvluty-final-content p strong{ color:#ffffff; } /* ========================================================= CTA BUTTONS ========================================================= */ .gvluty-final-actions{ display:flex; flex-direction:column; gap:12px; min-width:250px; } .gvluty-cta, .gvluty-phone{ display:flex; align-items:center; justify-content:center; gap:13px; min-height:65px; border-radius:8px; } .gvluty-cta{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 17px 35px rgba(0,0,0,.28); } .gvluty-cta:hover{ color:#04152d; transform:translateY(-2px); } .gvluty-cta span{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:rgba(4,21,45,.12); font-size:18px; } .gvluty-cta strong{ font-size:16px; } .gvluty-phone{ padding:8px 18px; border:1px solid rgba(240,180,41,.48); color:#ffffff; } .gvluty-phone:hover{ color:#ffffff; border-color:#f0b429; } .gvluty-phone > span{ color:#f0b429; font-size:19px; } .gvluty-phone strong{ display:block; font-size:16px; } .gvluty-phone small{ display:block; margin-top:3px; color:#b8c6d4; font-size:15px; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .gvluty-hero-layout{ grid-template-columns:1fr; gap:50px; } .gvluty-hero-statement{ max-width:600px; } .gvluty-evidence-layout{ grid-template-columns:1fr; gap:35px; } .gvluty-evidence-visual{ min-height:390px; } .gvluty-layer-grid{ grid-template-columns:1fr; } .gvluty-layer-card.featured{ transform:none; } .gvluty-institute-grid{ grid-template-columns:1fr; gap:45px; } .gvluty-institute-identity{ position:relative; top:auto; } } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width:991px){ .gvluty-hero{ padding:80px 0 70px; } .gvluty-hero h1{ font-size:60px; } .gvluty-method-heading{ grid-template-columns:1fr; } .gvluty-method-badge{ width:110px; height:110px; } .gvluty-method-flow{ grid-template-columns:1fr; gap:12px; } .gvluty-flow-arrow{ transform:rotate(90deg); } .gvluty-institute-method-grid{ grid-template-columns:1fr; } .gvluty-institute-method-grid > div{ border-right:0; border-bottom:1px solid rgba(9,47,98,.10); } .gvluty-institute-method-grid > div:last-child{ border-bottom:0; } .gvluty-final-inner{ grid-template-columns:1fr; gap:35px; } .gvluty-final-actions{ flex-direction:row; width:100%; } .gvluty-cta, .gvluty-phone{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gvluty-hero{ padding:62px 0 55px; } .gvluty-hero h1{ font-size:42px; letter-spacing:-1.8px; } .gvluty-hero-lead{ font-size:16px; line-height:1.75; } .gvluty-hero-facts{ grid-template-columns:repeat(2,1fr); } .gvluty-hero-facts div:nth-child(2){ border-right:0; } .gvluty-hero-facts div:nth-child(3){ border-top:1px solid rgba(255,255,255,.10); } .gvluty-hero-facts div:nth-child(4){ border-top:1px solid rgba(255,255,255,.10); border-right:0; } .gvluty-hero-statement{ padding:25px 20px; } .gvluty-hero-statement h2{ font-size:26px; } .gvluty-evidence, .gvluty-method, .gvluty-institute{ padding:72px 0; } .gvluty-section-heading{ grid-template-columns:1fr; gap:20px; margin-bottom:40px; } .gvluty-section-heading h2{ font-size:36px; } .gvluty-evidence-visual{ min-height:380px; } .gvluty-evidence-circle{ width:230px; height:230px; } .gvluty-evidence-circle strong{ font-size:65px; } .gvluty-evidence-tag{ right:5px; top:30px; } .gvluty-evidence-content p{ font-size:15px; line-height:1.75; } .gvluty-large-text{ font-size:18px !important; } .gvluty-evidence-alert{ grid-template-columns:45px minmax(0,1fr); padding:18px; } .gvluty-alert-icon{ width:40px; height:40px; } .gvluty-method-heading h2{ font-size:37px; } .gvluty-method-heading p{ font-size:15px; } .gvluty-layer-card{ padding:23px 19px; } .gvluty-layer-card h3{ font-size:26px; } .gvluty-documentation{ grid-template-columns:1fr; padding:21px; } .gvluty-documentation h3{ font-size:21px; } .gvluty-institute-number{ font-size:70px; } .gvluty-institute-identity h2{ font-size:36px; } .gvluty-institute-content > p{ font-size:15px; line-height:1.75; } .gvluty-institute-lead{ font-size:18px !important; } .gvluty-institute-method-head{ display:block; } .gvluty-institute-method-head strong{ display:block; margin-top:7px; line-height:1.45; } .gvluty-institute-proof{ grid-template-columns:1fr; } .gvluty-final{ padding:65px 0; } .gvluty-final-content h2{ font-size:36px; } .gvluty-final-content p{ font-size:15px; } .gvluty-final-actions{ flex-direction:column; } .gvluty-cta, .gvluty-phone{ width:100%; flex:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gvluty-hero h1{ font-size:36px; } .gvluty-hero-statement h2{ font-size:24px; } .gvluty-hero-facts strong{ font-size:23px; } .gvluty-section-heading h2, .gvluty-method-heading h2, .gvluty-institute-identity h2{ font-size:32px; } .gvluty-evidence-circle{ width:205px; height:205px; } .gvluty-evidence-circle strong{ font-size:58px; } .gvluty-evidence-result{ bottom:8px; } .gvluty-evidence-tag{ right:0; top:20px; padding:10px; } .gvluty-evidence-tag span, .gvluty-evidence-tag strong{ font-size:15px; } .gvluty-layer-number{ font-size:60px; } .gvluty-final-content h2{ font-size:32px; } } /* ========================================================= DELHI'S INSTITUTIONAL PROPERTY FOUR AUTHORITIES — FOUR TENURE FRAMEWORKS UNIQUE NAMESPACE: gvi- ROYAL PALETTE #092f62 Royal Navy #061d3d Deep Navy #04152d Dark Navy #b97800 Primary Gold #d99a16 Rich Gold #f0b429 Bright Gold MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .gvi-intro, .gvi-ndmc, .gvi-ldo, .gvi-dda, .gvi-cantonment, .gvi-comparison, .gvi-final{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gvi-intro *, .gvi-ndmc *, .gvi-ldo *, .gvi-dda *, .gvi-cantonment *, .gvi-comparison *, .gvi-final *{ box-sizing:border-box; } .gvi-intro a, .gvi-ndmc a, .gvi-ldo a, .gvi-dda a, .gvi-cantonment a, .gvi-comparison a, .gvi-final a{ text-decoration:none; } /* ========================================================= SECTION 01 — INTRO ========================================================= */ .gvi-intro{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 87% 25%, rgba(240,180,41,.13), transparent 29% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvi-intro-pattern{ position:absolute; inset:0; opacity:.42; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .gvi-intro-pattern:after{ content:""; position:absolute; width:650px; height:650px; right:-350px; top:-260px; border:1px solid rgba(240,180,41,.13); border-radius:50%; } .gvi-intro-wrap{ position:relative; z-index:2; max-width:1120px; margin:auto; } .gvi-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:28px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gvi-eyebrow span{ width:42px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvi-eyebrow i{ opacity:.5; font-style:normal; } .gvi-intro h1{ max-width:1050px; margin:0; color:#ffffff; font-size:clamp(48px,6.7vw,82px); font-weight:760; line-height:1; letter-spacing:-3.5px; } .gvi-intro h1 strong{ display:block; color:#f0b429; font-weight:760; } .gvi-intro-lead{ max-width:900px; margin:38px 0 0; padding-left:23px; border-left:2px solid #b97800; color:#d6e1ec; font-size:18px; line-height:1.8; } .gvi-intro-lead strong{ color:#ffffff; font-weight:800; } /* ========================================================= INTRO AUTHORITY RAIL ========================================================= */ .gvi-intro-rail{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:52px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .gvi-intro-rail > div{ display:flex; align-items:center; gap:15px; min-height:105px; padding:16px 20px; border-right:1px solid rgba(255,255,255,.10); } .gvi-intro-rail > div:first-child{ padding-left:0; } .gvi-intro-rail > div:last-child{ border-right:0; } .gvi-intro-rail b{ color:#f0b429; font-size:27px; font-weight:900; } .gvi-intro-rail span{ color:#c9d5e1; font-size:15px; line-height:1.4; } /* ========================================================= COMMON AUTHORITY ========================================================= */ .gvi-authority-layout{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:45px; } .gvi-authority-index{ position:relative; } .gvi-authority-index > span{ display:flex; align-items:center; justify-content:center; width:76px; height:76px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:25px; font-weight:900; } .gvi-authority-index > small{ display:block; margin-top:15px; color:#7b8795; font-size:15px; font-weight:850; letter-spacing:1px; } .gvi-index-line{ position:absolute; top:105px; left:38px; width:1px; height:calc(100% - 105px); background: linear-gradient( 180deg, #b97800, transparent ); } .gvi-authority-kicker, .gvi-dark-kicker{ margin-bottom:12px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gvi-authority-content h2, .gvi-ldo-header h2, .gvi-dda-heading h2, .gvi-cantonment-main h2{ margin:0 0 25px; font-size:clamp(40px,5vw,63px); line-height:1.04; letter-spacing:-2px; } .gvi-authority-content h2{ color:#061d3d; } .gvi-authority-content h2 strong, .gvi-ldo-header h2 strong, .gvi-dda-heading h2 strong, .gvi-cantonment-main h2 strong{ color:#b97800; } .gvi-authority-lead{ max-width:900px; margin:0 0 24px; color:#46596d; font-size:19px; line-height:1.8; } .gvi-authority-lead strong{ color:#092f62; } .gvi-authority-content > p:not(.gvi-authority-lead){ max-width:900px; margin:0 0 22px; color:#556678; font-size:16px; line-height:1.85; } .gvi-authority-content > p strong{ color:#092f62; } /* ========================================================= SECTION 02 — NDMC ========================================================= */ .gvi-ndmc{ padding:110px 0; background:#f8fafc; } .gvi-ndmc-bg{ position:absolute; right:-300px; top:100px; width:650px; height:650px; border:1px solid rgba(9,47,98,.07); border-radius:50%; } .gvi-ndmc-bg:after{ content:""; position:absolute; inset:100px; border:1px solid rgba(185,120,0,.09); border-radius:50%; } /* ========================================================= NDMC TENURE PANEL ========================================================= */ .gvi-tenure-panel{ margin:36px 0; padding:26px; border:1px solid rgba(9,47,98,.13); border-radius:12px; background:#ffffff; box-shadow:0 17px 40px rgba(6,29,61,.07); } .gvi-tenure-heading{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid rgba(9,47,98,.09); } .gvi-tenure-heading span{ color:#718093; font-size:15px; font-weight:800; letter-spacing:1px; } .gvi-tenure-heading strong{ color:#b97800; font-size:15px; letter-spacing:1px; } .gvi-tenure-visual{ display:grid; grid-template-columns:95px 1fr; align-items:center; gap:25px; padding:28px 0 18px; } .gvi-tenure-start{ text-align:center; } .gvi-tenure-start strong{ display:block; color:#092f62; font-size:43px; line-height:1; } .gvi-tenure-start span{ display:block; margin-top:7px; color:#7b8795; font-size:15px; line-height:1.35; } .gvi-tenure-track{ position:relative; min-height:85px; } .gvi-track-line{ position:absolute; top:22px; left:0; right:0; height:3px; background: linear-gradient( 90deg, #f0b429, #b97800, #092f62 ); } .gvi-track-point{ position:absolute; top:0; text-align:center; transform:translateX(-50%); } .gvi-track-point.p1{ left:15%; } .gvi-track-point.p2{ left:53%; } .gvi-track-point.p3{ left:88%; } .gvi-track-point:before{ content:""; display:block; width:18px; height:18px; margin:13px auto 10px; border:4px solid #ffffff; border-radius:50%; background:#b97800; box-shadow:0 0 0 1px #b97800; } .gvi-track-point b{ display:block; color:#092f62; font-size:17px; } .gvi-track-point span{ display:block; margin-top:4px; color:#778494; font-size:15px; line-height:1.3; } .gvi-tenure-panel > p{ margin:0; padding-top:15px; border-top:1px solid rgba(9,47,98,.08); color:#5a6878; font-size:15px; line-height:1.7; } /* ========================================================= NDMC MINI CARDS ========================================================= */ .gvi-two-column{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px; } .gvi-mini-card{ padding:25px; border:1px solid rgba(9,47,98,.12); border-radius:10px; background:#ffffff; } .gvi-mini-icon{ display:flex; align-items:center; justify-content:center; width:45px; height:45px; margin-bottom:17px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvi-mini-card h3{ margin:0 0 10px; color:#061d3d; font-size:22px; } .gvi-mini-card p{ margin:0; color:#59697b; font-size:15px; line-height:1.75; } .gvi-mini-card p strong{ color:#092f62; } /* ========================================================= AUTHORITY NOTE ========================================================= */ .gvi-authority-note{ margin-top:27px; padding:23px 25px; border-left:4px solid #b97800; border-radius:0 9px 9px 0; background: linear-gradient( 100deg, rgba(9,47,98,.07), rgba(185,120,0,.04) ); } .gvi-authority-note span{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvi-authority-note strong{ display:block; color:#092f62; font-size:20px; line-height:1.45; } .gvi-authority-note p{ margin:8px 0 0; color:#59697a; font-size:15px; line-height:1.7; } .gvi-authority-note p strong{ display:inline; color:#092f62; font-size:15px; } /* ========================================================= SECTION 03 — L&DO ========================================================= */ .gvi-ldo{ padding:110px 0; background: linear-gradient( 180deg, #ffffff, #f3f6fa ); } .gvi-ldo-header{ display:grid; grid-template-columns:85px minmax(0,1fr); gap:30px; margin-bottom:45px; } .gvi-gold-number{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:24px; font-weight:900; } .gvi-ldo-header h2{ color:#061d3d; } .gvi-ldo-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:45px; } .gvi-ldo-main{ min-width:0; } .gvi-large-copy{ max-width:900px; margin:0 0 22px; color:#435568; font-size:19px; line-height:1.8; } .gvi-large-copy strong{ color:#092f62; } .gvi-ldo-main > p:not(.gvi-large-copy){ max-width:900px; margin:0; color:#59697a; font-size:16px; line-height:1.85; } .gvi-ldo-main > p strong{ color:#092f62; } /* ========================================================= LDO FACTORS ========================================================= */ .gvi-ldo-factors{ margin-top:36px; border-top:1px solid rgba(9,47,98,.13); } .gvi-ldo-factor{ display:grid; grid-template-columns:54px minmax(0,1fr); gap:18px; padding:23px 0; border-bottom:1px solid rgba(9,47,98,.10); } .gvi-ldo-factor > span{ display:flex; align-items:center; justify-content:center; width:43px; height:43px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvi-ldo-factor h3{ margin:0 0 7px; color:#061d3d; font-size:22px; } .gvi-ldo-factor p{ margin:0; color:#5b6b7b; font-size:15px; line-height:1.7; } .gvi-ldo-factor p strong{ color:#092f62; } /* ========================================================= LDO SIDE PANEL ========================================================= */ .gvi-ldo-side{ align-self:start; position:relative; min-height:390px; padding:30px; border-radius:13px; color:#ffffff; background: radial-gradient( circle at 80% 15%, rgba(240,180,41,.17), transparent 30% ), linear-gradient( 145deg, #092f62, #04152d ); box-shadow:0 20px 45px rgba(6,29,61,.15); } .gvi-side-label{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvi-side-big{ margin-top:70px; color:#ffffff; font-size:75px; font-weight:900; line-height:.9; letter-spacing:-3px; } .gvi-side-rule{ width:65px; height:3px; margin:24px 0; background:#f0b429; } .gvi-ldo-side > p{ color:#c8d5e2; font-size:16px; line-height:1.7; } .gvi-side-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-top:35px; } .gvi-side-pills span{ padding:8px 10px; border:1px solid rgba(240,180,41,.30); border-radius:5px; color:#ffffff; font-size:15px; } /* ========================================================= LDO EQUATION ========================================================= */ .gvi-ldo-equation{ display:grid; grid-template-columns:1fr 55px 1fr; align-items:center; gap:15px; margin-top:34px; padding:23px; border-radius:10px; background:#061d3d; } .gvi-ldo-equation > div:first-child span, .gvi-equation-result span{ display:block; margin-bottom:6px; color:#8fa1b4; font-size:15px; font-weight:800; letter-spacing:.9px; } .gvi-ldo-equation > div:first-child strong{ color:#ffffff; font-size:17px; } .gvi-equation-arrow{ color:#f0b429; text-align:center; font-size:27px; } .gvi-equation-result{ padding-left:20px; border-left:1px solid rgba(240,180,41,.20); } .gvi-equation-result strong{ color:#f0b429; font-size:18px; } .gvi-ldo-footer-note{ margin-top:25px; padding:21px; border-left:3px solid #b97800; background:#ffffff; } .gvi-ldo-footer-note strong{ display:block; margin-bottom:7px; color:#092f62; font-size:18px; } .gvi-ldo-footer-note p{ margin:0; color:#59697a; font-size:15px; line-height:1.7; } .gvi-ldo-footer-note p strong{ display:inline; font-size:15px; } /* ========================================================= SECTION 04 — DDA ========================================================= */ .gvi-dda{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 85% 25%, rgba(240,180,41,.10), transparent 32% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvi-dda-background{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:75px 75px; } .gvi-dda-heading{ position:relative; z-index:2; display:grid; grid-template-columns:90px minmax(0,1fr); gap:30px; max-width:1050px; } .gvi-authority-index.light-index > span{ color:#f0b429; border-color:rgba(240,180,41,.45); } .gvi-authority-index.light-index > small{ color:#899caf; } .gvi-dda-heading h2{ color:#ffffff; } .gvi-dda-heading p{ max-width:900px; margin:0; color:#c9d5e1; font-size:17px; line-height:1.8; } .gvi-dda-heading p strong{ color:#ffffff; } .gold-kicker{ color:#f0b429; } /* ========================================================= DDA LOCATIONS ========================================================= */ .gvi-dda-locations{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:50px; background:rgba(240,180,41,.13); } .gvi-dda-locations > div{ min-height:120px; padding:22px; background:rgba(9,47,98,.68); } .gvi-dda-locations strong{ display:block; margin-bottom:7px; color:#f0b429; font-size:18px; } .gvi-dda-locations span{ color:#bcc9d6; font-size:15px; line-height:1.5; } /* ========================================================= DDA FACTORS ========================================================= */ .gvi-dda-factors{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:25px; } .gvi-dda-factor{ display:grid; grid-template-columns:55px minmax(0,1fr); gap:18px; padding:25px; border:1px solid rgba(240,180,41,.14); border-radius:10px; background:rgba(255,255,255,.035); } .gvi-dda-factor-no{ display:flex; align-items:center; justify-content:center; width:43px; height:43px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvi-dda-factor h3{ margin:0 0 8px; color:#ffffff; font-size:22px; } .gvi-dda-factor p{ margin:0; color:#bcc9d7; font-size:15px; line-height:1.75; } .gvi-dda-factor p strong{ color:#ffffff; } /* ========================================================= DDA BOTTOM ========================================================= */ .gvi-dda-bottom{ position:relative; z-index:2; display:grid; grid-template-columns:50px minmax(0,1fr); gap:20px; margin-top:35px; } .gvi-dda-bottom-line{ position:relative; } .gvi-dda-bottom-line:before{ content:""; position:absolute; top:3px; bottom:3px; left:50%; width:2px; background: linear-gradient( 180deg, #f0b429, transparent ); } .gvi-dda-bottom p{ max-width:900px; margin:0; color:#cbd7e3; font-size:16px; line-height:1.8; } .gvi-dda-bottom p strong{ color:#ffffff; } /* ========================================================= SECTION 05 — CANTONMENT ========================================================= */ .gvi-cantonment{ padding:110px 0; background:#f8fafc; } .gvi-cantonment-layout{ display:grid; grid-template-columns:105px minmax(0,1fr); gap:45px; } .gvi-cantonment-side{ position:relative; } .gvi-cantonment-number{ display:flex; align-items:center; justify-content:center; width:76px; height:76px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:25px; font-weight:900; } .gvi-cantonment-vertical{ margin:20px auto 0; color:#7d8997; font-size:15px; font-weight:850; letter-spacing:1px; writing-mode:vertical-rl; } .gvi-cantonment-main{ max-width:1000px; } .gvi-cantonment-main h2{ color:#061d3d; } .gvi-dark-lead{ color:#4c5e70; } .gvi-cantonment-main > p:not(.gvi-authority-lead){ max-width:900px; margin:0 0 24px; color:#566678; font-size:16px; line-height:1.85; } .gvi-cantonment-main > p strong{ color:#092f62; } /* ========================================================= MARKETABILITY ========================================================= */ .gvi-marketability{ margin:38px 0 27px; padding:27px; border-radius:12px; color:#ffffff; background: radial-gradient( circle at 85% 20%, rgba(240,180,41,.13), transparent 32% ), linear-gradient( 135deg, #04152d, #092f62 ); } .gvi-marketability-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.10); } .gvi-marketability-head span{ color:#aebdcc; font-size:15px; font-weight:800; letter-spacing:1px; } .gvi-marketability-head strong{ color:#f0b429; font-size:15px; letter-spacing:1px; } .gvi-marketability-body{ display:grid; grid-template-columns:115px 50px minmax(0,1fr); align-items:center; gap:22px; padding-top:28px; } .gvi-market-circle{ display:flex; align-items:center; justify-content:center; width:105px; height:105px; border:1px solid rgba(240,180,41,.42); border-radius:50%; } .gvi-market-circle div{ text-align:center; } .gvi-market-circle strong{ display:block; color:#f0b429; font-size:27px; } .gvi-market-circle span{ display:block; margin-top:4px; color:#aebdcc; font-size:15px; } .gvi-market-arrow{ color:#f0b429; text-align:center; font-size:25px; } .gvi-market-content h3{ margin:0 0 8px; color:#ffffff; font-size:24px; } .gvi-market-content p{ margin:0; color:#c1cedb; font-size:15px; line-height:1.7; } /* ========================================================= CANTONMENT WARNING ========================================================= */ .gvi-cantonment-warning{ padding:21px 23px; border-left:3px solid #b97800; background:#ffffff; box-shadow:0 10px 28px rgba(6,29,61,.05); } .gvi-cantonment-warning span{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvi-cantonment-warning p{ margin:0; color:#566678; font-size:15px; line-height:1.75; } .gvi-cantonment-warning p strong{ color:#092f62; } /* ========================================================= SARFAESI ========================================================= */ .gvi-sarfaesi{ display:grid; grid-template-columns:60px minmax(0,1fr); gap:19px; margin-top:28px; padding:25px; border:1px solid rgba(9,47,98,.13); border-radius:10px; background:#ffffff; } .gvi-sarfaesi-mark{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; color:#ffffff; background:#092f62; font-size:18px; font-weight:900; } .gvi-sarfaesi span{ display:block; margin-bottom:6px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvi-sarfaesi h3{ margin:0 0 8px; color:#061d3d; font-size:23px; } .gvi-sarfaesi p{ margin:0; color:#566678; font-size:15px; line-height:1.7; } .gvi-sarfaesi p strong{ color:#092f62; } .gvi-cantonment-note{ margin-top:20px; padding:20px; color:#536476; border-radius:8px; background:#eef3f8; font-size:15px; line-height:1.75; } .gvi-cantonment-note strong{ color:#092f62; } /* ========================================================= SECTION 06 — COMPARISON ========================================================= */ .gvi-comparison{ padding:100px 0; color:#ffffff; background: linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvi-comparison-header{ max-width:900px; margin-bottom:45px; } .gvi-comparison-header .gvi-dark-kicker{ color:#f0b429; } .gvi-comparison-header h2{ margin:0 0 17px; color:#ffffff; font-size:clamp(38px,4.8vw,59px); line-height:1.05; letter-spacing:-1.8px; } .gvi-comparison-header h2 strong{ color:#f0b429; } .gvi-comparison-header p{ margin:0; color:#c3d0dd; font-size:17px; line-height:1.8; } .gvi-comparison-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(240,180,41,.15); } .gvi-comparison-grid > div{ min-height:250px; padding:27px 22px; background:#061d3d; } .gvi-comparison-grid span{ display:block; margin-bottom:22px; color:#f0b429; font-size:15px; font-weight:900; } .gvi-comparison-grid strong{ display:block; color:#ffffff; font-size:27px; } .gvi-comparison-grid small{ display:block; margin-top:5px; color:#8fa2b6; font-size:15px; } .gvi-comparison-grid p{ margin:18px 0 0; color:#bdcad7; font-size:15px; line-height:1.7; } /* ========================================================= SECTION 07 — FINAL CTA ========================================================= */ .gvi-final{ padding:85px 0; color:#ffffff; background: radial-gradient( circle at 88% 50%, rgba(240,180,41,.15), transparent 30% ), #04152d; } .gvi-final-pattern{ position:absolute; right:-250px; top:-300px; width:650px; height:650px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gvi-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:60px; } .gvi-final-copy{ max-width:850px; } .gvi-final-copy > span{ display:block; margin-bottom:10px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvi-final-copy h2{ margin:0 0 17px; color:#ffffff; font-size:clamp(38px,4.8vw,59px); line-height:1.05; letter-spacing:-1.8px; } .gvi-final-copy h2 strong{ color:#f0b429; } .gvi-final-copy p{ margin:0; color:#c5d2df; font-size:16px; line-height:1.8; } .gvi-final-copy p strong{ color:#ffffff; } /* ========================================================= CTA BUTTONS ========================================================= */ .gvi-final-actions{ display:flex; flex-direction:column; gap:12px; min-width:250px; } .gvi-cta, .gvi-phone{ display:flex; align-items:center; justify-content:center; gap:13px; min-height:63px; border-radius:8px; } .gvi-cta{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 35px rgba(0,0,0,.30); } .gvi-cta:hover{ color:#04152d; transform:translateY(-2px); } .gvi-cta > span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(4,21,45,.12); font-size:18px; } .gvi-cta strong{ font-size:16px; } .gvi-phone{ padding:7px 17px; border:1px solid rgba(240,180,41,.50); color:#ffffff; } .gvi-phone:hover{ color:#ffffff; border-color:#f0b429; } .gvi-phone > span{ color:#f0b429; font-size:18px; } .gvi-phone strong{ display:block; font-size:16px; } .gvi-phone small{ display:block; margin-top:3px; color:#aebdcc; font-size:15px; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .gvi-intro-rail{ grid-template-columns:repeat(2,1fr); } .gvi-intro-rail > div:nth-child(2){ border-right:0; } .gvi-intro-rail > div:nth-child(3){ border-top:1px solid rgba(255,255,255,.10); } .gvi-intro-rail > div:nth-child(4){ border-top:1px solid rgba(255,255,255,.10); } .gvi-dda-locations{ grid-template-columns:repeat(2,1fr); } .gvi-comparison-grid{ grid-template-columns:repeat(2,1fr); } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gvi-intro{ padding:80px 0 70px; } .gvi-intro h1{ font-size:62px; } .gvi-authority-layout, .gvi-cantonment-layout{ grid-template-columns:1fr; gap:30px; } .gvi-index-line{ display:none; } .gvi-authority-index{ display:flex; align-items:center; gap:15px; } .gvi-authority-index > small{ margin:0; } .gvi-ldo-header, .gvi-dda-heading{ grid-template-columns:75px minmax(0,1fr); } .gvi-ldo-grid{ grid-template-columns:1fr; } .gvi-ldo-side{ min-height:270px; } .gvi-side-big{ margin-top:35px; } .gvi-final-inner{ grid-template-columns:1fr; gap:35px; } .gvi-final-actions{ flex-direction:row; } .gvi-cta, .gvi-phone{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gvi-intro, .gvi-ndmc, .gvi-ldo, .gvi-dda, .gvi-cantonment{ padding:70px 0; } .gvi-intro h1{ font-size:43px; letter-spacing:-1.8px; } .gvi-intro-lead{ font-size:16px; line-height:1.75; } .gvi-intro-rail{ grid-template-columns:1fr; } .gvi-intro-rail > div, .gvi-intro-rail > div:nth-child(3), .gvi-intro-rail > div:nth-child(4){ min-height:80px; border-right:0; border-top:1px solid rgba(255,255,255,.10); } .gvi-intro-rail > div:first-child{ border-top:0; } .gvi-authority-content h2, .gvi-ldo-header h2, .gvi-dda-heading h2, .gvi-cantonment-main h2{ font-size:35px; } .gvi-authority-lead, .gvi-large-copy{ font-size:17px; line-height:1.75; } .gvi-authority-content > p:not(.gvi-authority-lead), .gvi-ldo-main > p:not(.gvi-large-copy), .gvi-cantonment-main > p:not(.gvi-authority-lead){ font-size:15px; line-height:1.75; } .gvi-tenure-panel{ padding:18px; } .gvi-tenure-heading{ display:block; } .gvi-tenure-heading strong{ display:block; margin-top:6px; } .gvi-tenure-visual{ grid-template-columns:70px 1fr; gap:12px; } .gvi-tenure-start strong{ font-size:35px; } .gvi-two-column{ grid-template-columns:1fr; } .gvi-mini-card{ padding:21px; } .gvi-ldo-header, .gvi-dda-heading{ grid-template-columns:1fr; gap:20px; } .gvi-gold-number{ width:60px; height:60px; font-size:21px; } .gvi-ldo-side{ min-height:260px; } .gvi-side-big{ font-size:58px; } .gvi-ldo-equation{ grid-template-columns:1fr; gap:12px; } .gvi-equation-arrow{ transform:rotate(90deg); } .gvi-equation-result{ padding:13px 0 0; border-left:0; border-top:1px solid rgba(240,180,41,.20); } .gvi-dda-locations{ grid-template-columns:1fr; margin-top:35px; } .gvi-dda-factors{ grid-template-columns:1fr; } .gvi-dda-factor{ padding:21px; } .gvi-marketability{ padding:20px; } .gvi-marketability-head{ display:block; } .gvi-marketability-head strong{ display:block; margin-top:6px; } .gvi-marketability-body{ grid-template-columns:85px 35px minmax(0,1fr); gap:10px; } .gvi-market-circle{ width:80px; height:80px; } .gvi-market-circle strong{ font-size:22px; } .gvi-market-content h3{ font-size:20px; } .gvi-sarfaesi{ grid-template-columns:50px minmax(0,1fr); padding:20px; } .gvi-comparison{ padding:75px 0; } .gvi-comparison-grid{ grid-template-columns:1fr; } .gvi-final{ padding:65px 0; } .gvi-final-copy h2{ font-size:35px; } .gvi-final-copy p{ font-size:15px; } .gvi-final-actions{ flex-direction:column; } .gvi-cta, .gvi-phone{ width:100%; flex:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gvi-intro h1{ font-size:36px; } .gvi-intro h1 strong{ margin-top:5px; } .gvi-authority-content h2, .gvi-ldo-header h2, .gvi-dda-heading h2, .gvi-cantonment-main h2{ font-size:31px; } .gvi-tenure-visual{ grid-template-columns:1fr; } .gvi-tenure-track{ margin-top:15px; } .gvi-track-point.p1{ left:10%; } .gvi-track-point.p2{ left:50%; } .gvi-track-point.p3{ left:90%; } .gvi-marketability-body{ grid-template-columns:1fr; text-align:left; } .gvi-market-circle{ margin:auto; } .gvi-market-arrow{ transform:rotate(90deg); } .gvi-comparison-header h2{ font-size:32px; } .gvi-final-copy h2{ font-size:31px; } } /* ========================================================= DELHI PROPERTY LOCALITIES A2Z VALUERS' PRACTISED GEOGRAPHY UNIQUE NAMESPACE: gvdpl- BRAND COLOURS: #092f62 Royal Navy #061d3d Deep Navy #04152d Dark Navy #b97800 Primary Gold #d99a16 Gold #f0b429 Bright Gold MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gvdpl-intro, .gvdpl-premium, .gvdpl-midmarket, .gvdpl-central, .gvdpl-regions, .gvdpl-final{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gvdpl-intro *, .gvdpl-premium *, .gvdpl-midmarket *, .gvdpl-central *, .gvdpl-regions *, .gvdpl-final *{ box-sizing:border-box; } .gvdpl-intro a, .gvdpl-premium a, .gvdpl-midmarket a, .gvdpl-central a, .gvdpl-regions a, .gvdpl-final a{ text-decoration:none; } /* ========================================================= INTRO ========================================================= */ .gvdpl-intro{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 82% 22%, rgba(240,180,41,.13), transparent 27% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gvdpl-intro-grid{ position:absolute; inset:0; opacity:.45; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .gvdpl-intro-orbit{ position:absolute; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gvdpl-orbit-one{ width:520px; height:520px; right:-300px; top:-190px; } .gvdpl-orbit-two{ width:720px; height:720px; right:-400px; top:-290px; } .gvdpl-intro-inner{ position:relative; z-index:2; max-width:1150px; margin:auto; } .gvdpl-kicker{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:28px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gvdpl-kicker span{ width:45px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvdpl-kicker i{ font-style:normal; opacity:.55; } .gvdpl-intro h1{ max-width:1050px; margin:0; color:#ffffff; font-size:clamp(48px,7vw,82px); font-weight:760; line-height:.99; letter-spacing:-3.5px; } .gvdpl-intro h1 span{ display:block; margin-top:10px; color:#f0b429; } .gvdpl-intro-lead{ max-width:920px; margin:38px 0 0; padding-left:24px; border-left:2px solid #b97800; color:#d4dfeb; font-size:18px; line-height:1.8; } .gvdpl-intro-lead strong{ color:#ffffff; font-weight:800; } /* ========================================================= GEOGRAPHY INDEX ========================================================= */ .gvdpl-geography-index{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:52px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gvdpl-index-item{ display:flex; align-items:center; gap:15px; min-height:105px; padding:17px; border-right:1px solid rgba(255,255,255,.10); } .gvdpl-index-item:first-child{ padding-left:0; } .gvdpl-index-item:last-child{ border-right:0; } .gvdpl-index-item strong{ color:#f0b429; font-size:25px; font-weight:900; } .gvdpl-index-item span{ color:#c8d5e2; font-size:15px; line-height:1.45; } /* ========================================================= INTRO NOTE ========================================================= */ .gvdpl-intro-note{ display:flex; align-items:center; gap:15px; margin-top:27px; } .gvdpl-intro-note span{ color:#8497aa; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdpl-intro-note strong{ color:#ffffff; font-size:16px; } .gvdpl-intro-note small{ color:#9cafc1; font-size:15px; } /* ========================================================= COMMON SECTION HEADING ========================================================= */ .gvdpl-section-heading{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:27px; align-items:start; margin-bottom:48px; } .gvdpl-section-number{ display:flex; align-items:center; justify-content:center; width:70px; height:70px; border:1px solid rgba(185,120,0,.40); border-radius:50%; color:#b97800; font-size:23px; font-weight:900; } .gvdpl-heading-light .gvdpl-section-number{ color:#f0b429; border-color:rgba(240,180,41,.40); } .gvdpl-label{ margin-bottom:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvdpl-heading-light .gvdpl-label{ color:#f0b429; } .gvdpl-section-heading h2{ max-width:900px; margin:0; color:#061d3d; font-size:clamp(40px,5vw,64px); line-height:1.04; letter-spacing:-2px; } .gvdpl-section-heading h2 span{ display:block; margin-top:9px; color:#b97800; font-size:.62em; font-weight:550; letter-spacing:-.5px; } .gvdpl-heading-light h2{ color:#ffffff; } .gvdpl-heading-light h2 span{ color:#f0b429; } /* ========================================================= SECTION 1 — SOUTH DELHI PREMIUM ========================================================= */ .gvdpl-premium{ padding:110px 0; background:#f8fafc; } .gvdpl-premium-layout{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .gvdpl-locality-panel{ padding:27px; border:1px solid rgba(9,47,98,.13); border-radius:12px; background:#ffffff; box-shadow:0 15px 35px rgba(6,29,61,.06); } .gvdpl-panel-heading{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid rgba(9,47,98,.10); } .gvdpl-panel-heading span{ display:flex; align-items:center; justify-content:center; min-width:45px; min-height:35px; padding:5px 9px; border-radius:5px; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvdpl-panel-heading strong{ color:#061d3d; font-size:19px; } .gvdpl-locality-chips{ display:flex; flex-wrap:wrap; gap:9px; padding-top:20px; } .gvdpl-locality-chips span{ padding:9px 12px; border:1px solid rgba(185,120,0,.20); border-radius:5px; color:#092f62; background:#fbfcfd; font-size:15px; font-weight:650; } /* ========================================================= EVIDENCE ========================================================= */ .gvdpl-evidence{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:22px; margin-top:35px; padding:28px; border-left:4px solid #b97800; border-radius:0 11px 11px 0; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gvdpl-evidence-mark{ display:flex; align-items:center; justify-content:center; width:65px; height:65px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:17px; font-weight:900; } .gvdpl-evidence-content > span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdpl-evidence-content h3{ margin:8px 0 10px; color:#ffffff; font-size:25px; line-height:1.35; } .gvdpl-evidence-content h3 strong{ color:#f0b429; } .gvdpl-evidence-content p{ max-width:850px; margin:0; color:#c7d4e1; font-size:15px; line-height:1.75; } .gvdpl-evidence-content p strong{ color:#ffffff; } /* ========================================================= RETROSPECTIVE PANEL ========================================================= */ .gvdpl-retro{ margin-top:20px; padding:27px; border:1px solid rgba(9,47,98,.12); border-radius:11px; background:#ffffff; } .gvdpl-retro-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid rgba(9,47,98,.10); } .gvdpl-retro-top span{ color:#697789; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdpl-retro-top strong{ color:#b97800; font-size:17px; } .gvdpl-retro-grid{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:20px; } .gvdpl-retro-grid div{ padding:15px 17px; border-right:1px solid rgba(9,47,98,.10); } .gvdpl-retro-grid div:last-child{ border-right:0; } .gvdpl-retro-grid b{ display:block; color:#092f62; font-size:21px; } .gvdpl-retro-grid span{ display:block; margin-top:5px; color:#667487; font-size:15px; line-height:1.5; } .gvdpl-retro > p{ margin:22px 0 0; color:#556578; font-size:15px; line-height:1.75; } .gvdpl-retro > p strong{ color:#092f62; } /* ========================================================= INLINE CTA ========================================================= */ .gvdpl-inline-cta{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:30px; margin-top:35px; padding:24px 27px; border-radius:10px; background:#061d3d; } .gvdpl-inline-cta > div:first-child span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdpl-inline-cta > div:first-child strong{ color:#ffffff; font-size:20px; } .gvdpl-cta-actions{ display:flex; align-items:center; gap:10px; } .gvdpl-primary-cta, .gvdpl-phone-cta{ display:flex; align-items:center; justify-content:center; min-height:56px; border-radius:7px; } .gvdpl-primary-cta{ gap:10px; padding:0 20px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); font-size:15px; font-weight:850; box-shadow:0 10px 25px rgba(0,0,0,.20); } .gvdpl-primary-cta span{ font-size:17px; } .gvdpl-phone-cta{ flex-direction:column; align-items:flex-start; padding:7px 17px; border:1px solid rgba(240,180,41,.42); } .gvdpl-phone-cta span{ display:none; } .gvdpl-phone-cta strong{ color:#ffffff; font-size:15px; } .gvdpl-phone-cta small{ color:#aebdcb; font-size:15px; } /* ========================================================= SECTION 2 — MID MARKET ========================================================= */ .gvdpl-midmarket{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 88% 15%, rgba(240,180,41,.10), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .gvdpl-midmarket-intro{ max-width:850px; margin-bottom:35px; } .gvdpl-midmarket-intro p{ margin:0; color:#c7d4e1; font-size:18px; line-height:1.8; } .gvdpl-midmarket-intro p strong{ color:#ffffff; } /* ========================================================= MID MARKET LOCALITIES ========================================================= */ .gvdpl-mid-localities{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(240,180,41,.14); } .gvdpl-mid-locality{ min-height:82px; display:flex; align-items:center; padding:18px; color:#dce5ed; background:#061d3d; font-size:15px; font-weight:650; transition:.25s ease; } .gvdpl-mid-locality:hover{ color:#f0b429; background:#092f62; } /* ========================================================= MID CARDS ========================================================= */ .gvdpl-mid-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:25px; } .gvdpl-mid-cards article{ padding:27px; border:1px solid rgba(240,180,41,.15); border-radius:10px; background:rgba(255,255,255,.035); } .gvdpl-card-number{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:19px; border:1px solid rgba(240,180,41,.38); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdpl-mid-cards h3{ margin:0 0 10px; color:#ffffff; font-size:24px; } .gvdpl-mid-cards p{ margin:0; color:#bfcddb; font-size:15px; line-height:1.75; } .gvdpl-mid-cards p strong{ color:#ffffff; } /* ========================================================= CAPITAL GAIN PANEL ========================================================= */ .gvdpl-capital-panel{ display:grid; grid-template-columns:.55fr 1.45fr; gap:30px; margin-top:25px; padding:30px; border-left:4px solid #f0b429; background: linear-gradient( 110deg, rgba(240,180,41,.08), rgba(255,255,255,.025) ); } .gvdpl-capital-panel-label span{ display:block; margin-bottom:8px; color:#9babbc; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdpl-capital-panel-label strong{ color:#f0b429; font-size:18px; } .gvdpl-capital-panel-content h3{ margin:0 0 12px; color:#ffffff; font-size:25px; line-height:1.4; } .gvdpl-capital-panel-content h3 strong{ color:#f0b429; } .gvdpl-capital-panel-content p{ margin:0; color:#bdcad8; font-size:15px; line-height:1.75; } .gvdpl-capital-panel-content p strong{ color:#ffffff; } .gvdpl-capital-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .gvdpl-capital-tags span{ padding:8px 11px; border:1px solid rgba(240,180,41,.24); border-radius:5px; color:#dce5ed; font-size:15px; } /* ========================================================= SECTION 3 — CENTRAL DELHI ========================================================= */ .gvdpl-central{ padding:110px 0; background:#f8fafc; } .gvdpl-central-pattern{ position:absolute; right:-250px; top:80px; width:650px; height:650px; border:1px solid rgba(185,120,0,.07); border-radius:50%; } .gvdpl-commercial-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(9,47,98,.14); } .gvdpl-commercial-grid > div{ min-height:100px; display:flex; align-items:center; padding:20px; color:#092f62; background:#ffffff; font-size:15px; font-weight:700; } .gvdpl-commercial-feature{ grid-column:span 2; display:block !important; min-height:150px !important; padding:25px !important; color:#ffffff !important; background: linear-gradient( 135deg, #04152d, #092f62 ) !important; } .gvdpl-commercial-feature span{ display:flex; align-items:center; justify-content:center; width:47px; height:47px; margin-bottom:15px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdpl-commercial-feature strong{ display:block; color:#ffffff; font-size:22px; } .gvdpl-commercial-feature small{ display:block; margin-top:5px; color:#aebdcb; font-size:15px; } /* ========================================================= CONNAUGHT PLACE FEATURE ========================================================= */ .gvdpl-cp-feature{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:35px; margin-top:35px; padding:35px; border-radius:12px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gvdpl-cp-monogram{ display:flex; align-items:center; justify-content:center; width:105px; height:105px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:29px; font-weight:900; } .gvdpl-cp-content .gvdpl-label{ color:#f0b429; } .gvdpl-cp-content h3{ max-width:800px; margin:0 0 13px; color:#ffffff; font-size:31px; line-height:1.3; } .gvdpl-cp-content h3 strong{ color:#f0b429; } .gvdpl-cp-content > p{ max-width:850px; margin:0; color:#c5d2df; font-size:15px; line-height:1.8; } .gvdpl-cp-content > p strong{ color:#ffffff; } .gvdpl-cp-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:25px; } .gvdpl-cp-points div{ display:flex; align-items:center; gap:10px; padding:12px; border:1px solid rgba(240,180,41,.16); border-radius:6px; } .gvdpl-cp-points span{ color:#f0b429; font-size:15px; font-weight:900; } .gvdpl-cp-points strong{ color:#ffffff; font-size:15px; } /* ========================================================= PRACTICE ADVANTAGE ========================================================= */ .gvdpl-practice-advantage{ display:grid; grid-template-columns:4px minmax(0,1fr); gap:25px; margin-top:38px; } .gvdpl-advantage-line{ background: linear-gradient( 180deg, #b97800, #f0b429 ); } .gvdpl-practice-advantage span{ display:block; margin-bottom:8px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.1px; } .gvdpl-practice-advantage h3{ margin:0 0 10px; color:#061d3d; font-size:29px; } .gvdpl-practice-advantage h3 strong{ color:#b97800; } .gvdpl-practice-advantage p{ max-width:850px; margin:0; color:#536274; font-size:15px; line-height:1.8; } .gvdpl-practice-advantage p strong{ color:#092f62; } /* ========================================================= SECTION 4 — REGIONS ========================================================= */ .gvdpl-regions{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 10% 20%, rgba(240,180,41,.08), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 58%, #092f62 ); } .gvdpl-regions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .gvdpl-region-card{ padding:28px; border:1px solid rgba(240,180,41,.14); border-radius:11px; background: linear-gradient( 160deg, rgba(9,47,98,.85), rgba(6,29,61,.96) ); } .gvdpl-region-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; } .gvdpl-region-top span{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:20px; font-weight:900; } .gvdpl-region-top small{ color:#91a4b8; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdpl-region-card h3{ margin:0 0 17px; color:#ffffff; font-size:24px; } .gvdpl-region-localities{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; } .gvdpl-region-localities span{ padding:7px 9px; border:1px solid rgba(255,255,255,.10); border-radius:4px; color:#d1dce7; background:rgba(255,255,255,.035); font-size:15px; } .gvdpl-region-card p{ margin:0; color:#bdcad8; font-size:15px; line-height:1.75; } .gvdpl-region-card p strong{ color:#ffffff; } /* ========================================================= CROSS CITY ========================================================= */ .gvdpl-cross-city{ display:grid; grid-template-columns:105px minmax(0,1fr); gap:28px; align-items:center; margin-top:28px; padding:30px; border:1px solid rgba(240,180,41,.17); border-radius:11px; background: linear-gradient( 110deg, rgba(240,180,41,.08), rgba(255,255,255,.025) ); } .gvdpl-cross-city-number{ display:flex; align-items:center; justify-content:center; width:90px; height:90px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:19px; font-weight:900; } .gvdpl-cross-city span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdpl-cross-city h3{ margin:0 0 9px; color:#ffffff; font-size:29px; } .gvdpl-cross-city h3 strong{ color:#f0b429; } .gvdpl-cross-city p{ max-width:850px; margin:0; color:#bfccda; font-size:15px; line-height:1.8; } .gvdpl-cross-city p strong{ color:#ffffff; } /* ========================================================= FINAL CTA ========================================================= */ .gvdpl-final{ padding:90px 0; color:#ffffff; background: radial-gradient( circle at 90% 50%, rgba(240,180,41,.14), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 58%, #092f62 ); } .gvdpl-final-circle{ position:absolute; right:-300px; top:-180px; width:650px; height:650px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gvdpl-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:55px; } .gvdpl-final-copy{ max-width:850px; } .gvdpl-final-copy .gvdpl-label{ color:#f0b429; } .gvdpl-final-copy h2{ margin:0 0 18px; color:#ffffff; font-size:clamp(39px,5vw,61px); line-height:1.04; letter-spacing:-2px; } .gvdpl-final-copy h2 span{ display:block; color:#f0b429; } .gvdpl-final-copy p{ margin:0; color:#c7d4e1; font-size:16px; line-height:1.8; } .gvdpl-final-copy p strong{ color:#ffffff; } /* ========================================================= FINAL BUTTONS ========================================================= */ .gvdpl-final-actions{ display:flex; flex-direction:column; gap:11px; min-width:245px; } .gvdpl-final-cta, .gvdpl-final-phone{ display:flex; align-items:center; justify-content:center; min-height:62px; border-radius:8px; } .gvdpl-final-cta{ gap:12px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow:0 15px 30px rgba(0,0,0,.27); transition:.25s ease; } .gvdpl-final-cta:hover{ color:#04152d; transform:translateY(-2px); } .gvdpl-final-cta span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(4,21,45,.13); font-size:18px; } .gvdpl-final-cta strong{ font-size:16px; } .gvdpl-final-phone{ gap:12px; padding:8px 17px; border:1px solid rgba(240,180,41,.45); color:#ffffff; } .gvdpl-final-phone > span{ color:#f0b429; font-size:19px; } .gvdpl-final-phone strong{ display:block; font-size:16px; } .gvdpl-final-phone small{ display:block; margin-top:3px; color:#aebdcb; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media(max-width:1100px){ .gvdpl-geography-index{ grid-template-columns:repeat(2,1fr); } .gvdpl-index-item:nth-child(2){ border-right:0; } .gvdpl-mid-localities{ grid-template-columns:repeat(3,1fr); } .gvdpl-commercial-grid{ grid-template-columns:repeat(3,1fr); } .gvdpl-commercial-feature{ grid-column:span 2; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:991px){ .gvdpl-intro{ padding:80px 0 70px; } .gvdpl-intro h1{ font-size:60px; } .gvdpl-premium, .gvdpl-midmarket, .gvdpl-central, .gvdpl-regions{ padding:80px 0; } .gvdpl-premium-layout{ grid-template-columns:1fr; } .gvdpl-retro-grid{ grid-template-columns:repeat(2,1fr); } .gvdpl-retro-grid div:nth-child(2){ border-right:0; } .gvdpl-mid-localities{ grid-template-columns:repeat(2,1fr); } .gvdpl-mid-cards{ grid-template-columns:1fr; } .gvdpl-capital-panel{ grid-template-columns:1fr; gap:20px; } .gvdpl-commercial-grid{ grid-template-columns:repeat(2,1fr); } .gvdpl-commercial-feature{ grid-column:span 2; } .gvdpl-regions-grid{ grid-template-columns:1fr; } .gvdpl-final-inner{ grid-template-columns:1fr; gap:30px; } .gvdpl-final-actions{ flex-direction:row; } .gvdpl-final-cta, .gvdpl-final-phone{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:767px){ .gvdpl-intro{ padding:62px 0 55px; } .gvdpl-intro h1{ font-size:43px; letter-spacing:-2px; } .gvdpl-intro-lead{ font-size:16px; padding-left:17px; } .gvdpl-geography-index{ grid-template-columns:1fr; } .gvdpl-index-item, .gvdpl-index-item:first-child{ padding:14px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gvdpl-index-item:last-child{ border-bottom:0; } .gvdpl-intro-note{ align-items:flex-start; flex-direction:column; gap:5px; } .gvdpl-section-heading{ grid-template-columns:1fr; gap:20px; margin-bottom:35px; } .gvdpl-section-number{ width:60px; height:60px; font-size:20px; } .gvdpl-section-heading h2{ font-size:36px; } .gvdpl-section-heading h2 span{ font-size:.66em; line-height:1.25; } .gvdpl-premium, .gvdpl-midmarket, .gvdpl-central, .gvdpl-regions{ padding:70px 0; } .gvdpl-locality-panel{ padding:21px; } .gvdpl-panel-heading{ align-items:flex-start; flex-direction:column; gap:10px; } .gvdpl-evidence{ grid-template-columns:1fr; gap:16px; padding:22px; } .gvdpl-evidence-content h3{ font-size:22px; } .gvdpl-retro{ padding:21px; } .gvdpl-retro-top{ align-items:flex-start; flex-direction:column; gap:8px; } .gvdpl-retro-grid{ grid-template-columns:1fr; } .gvdpl-retro-grid div, .gvdpl-retro-grid div:nth-child(2){ border-right:0; border-bottom:1px solid rgba(9,47,98,.10); } .gvdpl-retro-grid div:last-child{ border-bottom:0; } .gvdpl-inline-cta{ grid-template-columns:1fr; padding:22px; } .gvdpl-cta-actions{ flex-direction:column; } .gvdpl-primary-cta, .gvdpl-phone-cta{ width:100%; } .gvdpl-mid-localities{ grid-template-columns:1fr; } .gvdpl-mid-locality{ min-height:60px; } .gvdpl-capital-panel{ padding:22px; } .gvdpl-commercial-grid{ grid-template-columns:1fr; } .gvdpl-commercial-feature{ grid-column:auto; } .gvdpl-cp-feature{ grid-template-columns:1fr; gap:23px; padding:25px; } .gvdpl-cp-monogram{ width:80px; height:80px; font-size:23px; } .gvdpl-cp-content h3{ font-size:26px; } .gvdpl-cp-points{ grid-template-columns:1fr; } .gvdpl-practice-advantage h3{ font-size:25px; } .gvdpl-cross-city{ grid-template-columns:1fr; padding:24px; } .gvdpl-final{ padding:70px 0; } .gvdpl-final-copy h2{ font-size:37px; } .gvdpl-final-actions{ flex-direction:column; } .gvdpl-final-cta, .gvdpl-final-phone{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:480px){ .gvdpl-intro h1{ font-size:36px; } .gvdpl-section-heading h2{ font-size:32px; } .gvdpl-evidence-content h3, .gvdpl-capital-panel-content h3{ font-size:21px; } .gvdpl-cp-content h3{ font-size:24px; } .gvdpl-final-copy h2{ font-size:32px; } } /* ========================================================= DELHI NCR — ONE MARKET / FOUR FRAMEWORKS UNIQUE NAMESPACE: gvdncr- ROYAL NAVY + GOLD SYSTEM #092f62 #061d3d #04152d #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gvdncr-hero, .gvdncr-city, .gvdncr-twin, .gvdncr-final{ position:relative; width:100%; overflow:hidden; } .gvdncr-hero *, .gvdncr-city *, .gvdncr-twin *, .gvdncr-final *{ box-sizing:border-box; } .gvdncr-hero a, .gvdncr-city a, .gvdncr-twin a, .gvdncr-final a{ text-decoration:none; } /* ========================================================= HERO ========================================================= */ .gvdncr-hero{ padding:105px 0 85px; color:#ffffff; background: radial-gradient( circle at 88% 12%, rgba(240,180,41,.13), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #061d3d 58%, #092f62 100% ); } .gvdncr-hero-pattern{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .gvdncr-hero-orbit{ position:absolute; right:-250px; top:80px; width:650px; height:650px; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .gvdncr-hero-orbit:before{ content:""; position:absolute; inset:80px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .gvdncr-hero-inner{ position:relative; z-index:2; max-width:1180px; margin:auto; } .gvdncr-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:28px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gvdncr-eyebrow span{ width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvdncr-eyebrow i{ opacity:.5; font-style:normal; } .gvdncr-hero h1{ max-width:1050px; margin:0; color:#ffffff; font-size:clamp(52px,7vw,88px); font-weight:760; line-height:.98; letter-spacing:-4px; } .gvdncr-hero h1 span{ color:#f0b429; } .gvdncr-hero-lead{ max-width:900px; margin:38px 0 0; padding-left:23px; border-left:2px solid #b97800; color:#d6e0eb; font-size:18px; line-height:1.8; } .gvdncr-hero-lead strong{ color:#ffffff; } /* ========================================================= FOUR JURISDICTION INDEX ========================================================= */ .gvdncr-jurisdiction-index{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:50px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .gvdncr-index-card{ display:flex; align-items:center; gap:17px; min-height:105px; padding:18px; border-right:1px solid rgba(255,255,255,.10); } .gvdncr-index-card:first-child{ padding-left:0; } .gvdncr-index-card:last-child{ border-right:0; } .gvdncr-index-card > strong{ color:rgba(240,180,41,.55); font-size:24px; font-weight:900; } .gvdncr-index-card.active > strong{ color:#f0b429; } .gvdncr-index-card span{ display:block; margin-bottom:4px; color:#91a3b7; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdncr-index-card b{ color:#ffffff; font-size:16px; } .gvdncr-hero-statement{ display:flex; flex-direction:column; gap:6px; max-width:680px; margin-top:32px; padding-left:18px; border-left:2px solid rgba(240,180,41,.55); } .gvdncr-hero-statement span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.1px; } .gvdncr-hero-statement strong{ color:#ffffff; font-size:20px; line-height:1.45; } /* ========================================================= CITY COMMON ========================================================= */ .gvdncr-city{ padding:105px 0; } .gvdncr-city-layout{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:75px; align-items:start; } .gvdncr-city-layout.reverse-mobile{ grid-template-columns:minmax(0,1fr) 300px; } .gvdncr-city-identity{ position:sticky; top:40px; } .gvdncr-city-number{ display:flex; align-items:center; justify-content:center; width:82px; height:82px; margin-bottom:27px; border:1px solid rgba(185,120,0,.50); border-radius:50%; color:#b97800; font-size:27px; font-weight:900; } .gvdncr-state{ display:block; margin-bottom:8px; color:#b97800; font-size:15px; font-weight:900; letter-spacing:1.7px; } .gvdncr-city-identity h2{ margin:0; color:#061d3d; font-size:clamp(44px,5vw,68px); line-height:.95; letter-spacing:-3px; } .gvdncr-city-identity > p{ margin:9px 0 30px; color:#778494; font-size:17px; } .gvdncr-regulator{ padding:18px; border-left:3px solid #b97800; background: linear-gradient( 135deg, rgba(9,47,98,.07), rgba(185,120,0,.05) ); } .gvdncr-regulator span{ display:block; margin-bottom:6px; color:#687688; font-size:15px; font-weight:800; line-height:1.5; } .gvdncr-regulator strong{ color:#092f62; font-size:18px; } /* ========================================================= CITY CONTENT ========================================================= */ .gvdncr-city-content{ max-width:950px; } .gvdncr-city-kicker{ margin-bottom:14px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvdncr-city-content h3{ margin:0 0 24px; color:#061d3d; font-size:clamp(36px,4.5vw,57px); line-height:1.05; letter-spacing:-2px; } .gvdncr-city-content h3 strong{ color:#b97800; } .gvdncr-lead{ margin:0 0 32px; color:#4f6072; font-size:18px; line-height:1.8; } .gvdncr-lead strong{ color:#092f62; } /* ========================================================= INFO PANEL ========================================================= */ .gvdncr-info-panel{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:19px; margin:32px 0; padding:24px; border:1px solid rgba(9,47,98,.12); border-radius:11px; background:#ffffff; box-shadow:0 16px 35px rgba(6,29,61,.06); } .gvdncr-info-icon{ display:flex; align-items:center; justify-content:center; width:57px; height:57px; border-radius:50%; color:#f0b429; background: linear-gradient( 135deg, #092f62, #061d3d ); font-size:17px; font-weight:900; } .gvdncr-info-panel span{ display:block; margin-bottom:5px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdncr-info-panel h4{ margin:0 0 9px; color:#061d3d; font-size:22px; } .gvdncr-info-panel p{ margin:0; color:#59697a; font-size:15px; line-height:1.75; } .gvdncr-info-panel p strong{ color:#092f62; } /* ========================================================= MARKET GRID ========================================================= */ .gvdncr-market-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:30px 0; border:1px solid rgba(9,47,98,.12); background:rgba(9,47,98,.12); } .gvdncr-market-grid > div{ min-height:175px; padding:23px; background:#f8fafc; } .gvdncr-market-grid span, .gvdncr-corridor-grid span{ display:block; margin-bottom:8px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdncr-market-grid strong, .gvdncr-corridor-grid strong{ display:block; margin-bottom:9px; color:#061d3d; font-size:20px; } .gvdncr-market-grid p, .gvdncr-corridor-grid p{ margin:0; color:#657486; font-size:15px; line-height:1.65; } /* ========================================================= INSTITUTIONAL PANEL ========================================================= */ .gvdncr-institutional{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:20px; margin:32px 0; padding:25px; border-left:4px solid #b97800; border-radius:0 11px 11px 0; background: linear-gradient( 135deg, #04152d, #092f62 ); } .gvdncr-institutional-mark{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdncr-institutional span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdncr-institutional h4{ margin:0 0 9px; color:#ffffff; font-size:21px; } .gvdncr-institutional p{ margin:0; color:#c5d2df; font-size:15px; line-height:1.75; } .gvdncr-institutional p strong{ color:#ffffff; } /* ========================================================= DLF BRAND PREMIUM ========================================================= */ .gvdncr-brand-premium{ margin:32px 0; padding:25px; border:1px solid rgba(185,120,0,.22); border-radius:11px; background: linear-gradient( 135deg, #ffffff, #faf8f2 ); } .gvdncr-brand-heading{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:15px; border-bottom:1px solid rgba(9,47,98,.10); } .gvdncr-brand-heading span{ color:#657486; font-size:15px; font-weight:800; } .gvdncr-brand-heading strong{ color:#b97800; font-size:15px; letter-spacing:1px; } .gvdncr-brand-premium > p{ margin:19px 0; color:#536375; font-size:15px; line-height:1.75; } .gvdncr-brand-premium > p strong{ color:#092f62; } /* ========================================================= PREMIUM EQUATION ========================================================= */ .gvdncr-premium-equation{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; } .gvdncr-premium-equation span, .gvdncr-premium-equation strong{ padding:9px 11px; border-radius:5px; font-size:15px; font-weight:850; } .gvdncr-premium-equation span{ color:#092f62; border:1px solid rgba(9,47,98,.13); background:#f4f7fa; } .gvdncr-premium-equation strong{ color:#ffffff; background:#092f62; } .gvdncr-premium-equation b{ color:#b97800; } /* ========================================================= CITY NOTE ========================================================= */ .gvdncr-city-note{ margin-top:28px; padding:18px 20px; border-left:3px solid #b97800; color:#59697a; background:rgba(185,120,0,.05); font-size:15px; line-height:1.75; } .gvdncr-city-note strong{ color:#092f62; } /* ========================================================= GURUGRAM ========================================================= */ .gvdncr-gurugram{ background:#ffffff; } /* ========================================================= NOIDA ========================================================= */ .gvdncr-noida{ background: linear-gradient( 180deg, #f8fafc, #eef3f8 ); } .gvdncr-noida .gvdncr-city-identity h2{ color:#092f62; } /* ========================================================= CORRIDOR GRID ========================================================= */ .gvdncr-corridor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:30px 0; border:1px solid rgba(9,47,98,.12); background:rgba(9,47,98,.12); } .gvdncr-corridor-grid > div{ min-height:165px; padding:23px; background:#ffffff; } .gvdncr-corridor-grid .gvdncr-corridor-main{ background: linear-gradient( 135deg, #092f62, #061d3d ); } .gvdncr-corridor-grid .gvdncr-corridor-main span, .gvdncr-corridor-grid .gvdncr-corridor-main strong, .gvdncr-corridor-grid .gvdncr-corridor-main p{ color:#ffffff; } .gvdncr-corridor-grid .gvdncr-corridor-main span{ color:#f0b429; } /* ========================================================= BUILDER PANEL ========================================================= */ .gvdncr-builder-panel{ display:grid; grid-template-columns:60px minmax(0,1fr); gap:19px; margin:32px 0 18px; padding:23px; border-radius:10px; background:#061d3d; } .gvdncr-builder-number{ display:flex; align-items:center; justify-content:center; width:49px; height:49px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdncr-builder-panel span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdncr-builder-panel h4{ margin:0 0 7px; color:#ffffff; font-size:21px; } .gvdncr-builder-panel p{ margin:0; color:#c3d0dd; font-size:15px; line-height:1.7; } /* ========================================================= FMV BOX ========================================================= */ .gvdncr-fmv-box{ margin:18px 0 30px; padding:22px; border:1px solid rgba(185,120,0,.20); border-radius:10px; background:#ffffff; } .gvdncr-fmv-heading{ display:flex; justify-content:space-between; gap:20px; padding-bottom:15px; border-bottom:1px solid rgba(9,47,98,.10); } .gvdncr-fmv-heading span{ color:#647487; font-size:15px; font-weight:800; } .gvdncr-fmv-heading strong{ color:#b97800; font-size:15px; letter-spacing:1px; } .gvdncr-fmv-items{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; } .gvdncr-fmv-items div{ padding:16px; border-radius:7px; background:#f5f7fa; } .gvdncr-fmv-items b{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; } .gvdncr-fmv-items span{ color:#092f62; font-size:15px; font-weight:750; line-height:1.4; } /* ========================================================= TWIN SECTION ========================================================= */ .gvdncr-twin{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 90% 20%, rgba(240,180,41,.11), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .gvdncr-twin-background{ position:absolute; inset:0; opacity:.25; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:65px 65px; } .gvdncr-twin-heading{ position:relative; z-index:2; display:grid; grid-template-columns:90px minmax(0,1fr); gap:30px; max-width:1050px; margin-bottom:50px; } .gvdncr-section-number{ display:flex; align-items:center; justify-content:center; width:74px; height:74px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:25px; font-weight:900; } .gvdncr-twin-heading > div:last-child > span{ display:block; margin:0 0 10px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvdncr-twin-heading h2{ margin:0 0 17px; color:#ffffff; font-size:clamp(38px,4.8vw,60px); line-height:1.05; letter-spacing:-2px; } .gvdncr-twin-heading h2 strong{ color:#f0b429; } .gvdncr-twin-heading p{ max-width:850px; margin:0; color:#c5d2df; font-size:17px; line-height:1.8; } /* ========================================================= TWIN CARDS ========================================================= */ .gvdncr-twin-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .gvdncr-twin-card{ padding:31px; border:1px solid rgba(240,180,41,.16); border-radius:11px; background: linear-gradient( 150deg, rgba(9,47,98,.96), rgba(6,29,61,.96) ); } .gvdncr-twin-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; } .gvdncr-twin-code{ display:flex; align-items:center; justify-content:center; width:49px; height:49px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdncr-twin-top > span{ color:#91a5b9; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdncr-twin-card h3{ margin:0 0 18px; color:#ffffff; font-size:34px; } .gvdncr-location-line{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:25px; } .gvdncr-location-line span{ padding:7px 10px; border:1px solid rgba(240,180,41,.20); border-radius:5px; color:#d2dce7; font-size:15px; } .gvdncr-twin-card p{ margin:0 0 17px; color:#c1cedb; font-size:15px; line-height:1.8; } .gvdncr-twin-card p strong{ color:#ffffff; } .gvdncr-twin-footer{ margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10); } .gvdncr-twin-footer span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdncr-twin-footer strong{ color:#ffffff; font-size:16px; } /* ========================================================= INTEGRATED BAND ========================================================= */ .gvdncr-integrated-band{ position:relative; z-index:2; display:grid; grid-template-columns:75px minmax(0,1fr); gap:22px; margin-top:40px; padding:28px; border-left:3px solid #f0b429; background:rgba(240,180,41,.055); } .gvdncr-integrated-icon{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdncr-integrated-band span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdncr-integrated-band h3{ margin:0 0 8px; color:#ffffff; font-size:25px; } .gvdncr-integrated-band p{ max-width:850px; margin:0; color:#c4d1de; font-size:15px; line-height:1.75; } .gvdncr-integrated-band p strong{ color:#ffffff; } /* ========================================================= FINAL ========================================================= */ .gvdncr-final{ padding:95px 0; color:#ffffff; background: radial-gradient( circle at 15% 85%, rgba(240,180,41,.10), transparent 30% ), linear-gradient( 135deg, #092f62, #061d3d 60%, #04152d ); } .gvdncr-final-grid{ position:absolute; inset:0; opacity:.20; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .gvdncr-final-inner{ position:relative; z-index:2; max-width:1150px; margin:auto; } .gvdncr-final-heading{ max-width:900px; } .gvdncr-final-heading > span{ display:block; margin-bottom:12px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvdncr-final-heading h2{ margin:0 0 19px; color:#ffffff; font-size:clamp(40px,5.2vw,67px); line-height:1.02; letter-spacing:-2.5px; } .gvdncr-final-heading h2 strong{ color:#f0b429; } .gvdncr-final-heading p{ max-width:850px; margin:0; color:#c9d5e1; font-size:17px; line-height:1.8; } .gvdncr-final-heading p strong{ color:#ffffff; } /* ========================================================= FOUR FRAMEWORK SUMMARY ========================================================= */ .gvdncr-framework{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:48px; background:rgba(240,180,41,.18); } .gvdncr-framework > div{ min-height:185px; padding:24px 20px; background:rgba(4,21,45,.72); } .gvdncr-framework span{ display:block; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:900; } .gvdncr-framework strong{ display:block; margin-bottom:6px; color:#ffffff; font-size:18px; } .gvdncr-framework small{ display:block; margin-bottom:14px; color:#91a3b6; font-size:15px; } .gvdncr-framework b{ display:inline-block; padding:7px 9px; border:1px solid rgba(240,180,41,.25); border-radius:5px; color:#f0b429; font-size:15px; } /* ========================================================= FINAL CTA ========================================================= */ .gvdncr-final-actions{ display:flex; align-items:center; gap:13px; margin-top:38px; } .gvdncr-cta, .gvdncr-phone{ display:flex; align-items:center; min-height:66px; border-radius:8px; } .gvdncr-cta{ gap:12px; padding:10px 24px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 14px 32px rgba(0,0,0,.25); } .gvdncr-cta:hover{ color:#04152d; } .gvdncr-cta > span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(4,21,45,.13); font-size:18px; } .gvdncr-cta strong{ display:block; font-size:16px; } .gvdncr-cta small{ display:block; margin-top:3px; font-size:15px; } .gvdncr-phone{ gap:13px; padding:9px 20px; border:1px solid rgba(240,180,41,.48); color:#ffffff; } .gvdncr-phone:hover{ color:#ffffff; border-color:#f0b429; } .gvdncr-phone > span{ color:#f0b429; font-size:19px; } .gvdncr-phone strong{ display:block; font-size:16px; } .gvdncr-phone small{ display:block; margin-top:3px; color:#b7c5d3; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1100px){ .gvdncr-city-layout{ grid-template-columns:240px minmax(0,1fr); gap:45px; } .gvdncr-city-layout.reverse-mobile{ grid-template-columns:minmax(0,1fr) 240px; } .gvdncr-framework{ grid-template-columns:repeat(2,1fr); } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gvdncr-hero{ padding:80px 0 70px; } .gvdncr-hero h1{ font-size:62px; } .gvdncr-jurisdiction-index{ grid-template-columns:repeat(2,1fr); } .gvdncr-index-card:nth-child(2){ border-right:0; } .gvdncr-city-layout, .gvdncr-city-layout.reverse-mobile{ grid-template-columns:1fr; gap:40px; } .gvdncr-city-identity{ position:relative; top:auto; } .gvdncr-city-identity h2{ font-size:55px; } .gvdncr-city-layout.reverse-mobile .gvdncr-city-identity{ grid-row:1; } .gvdncr-city-layout.reverse-mobile .gvdncr-city-content{ grid-row:2; } .gvdncr-twin-grid{ grid-template-columns:1fr; } .gvdncr-twin-heading{ grid-template-columns:70px minmax(0,1fr); } .gvdncr-fmv-items{ grid-template-columns:repeat(2,1fr); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gvdncr-hero{ padding:62px 0 58px; } .gvdncr-hero h1{ font-size:43px; letter-spacing:-2px; } .gvdncr-hero-lead{ font-size:16px; line-height:1.75; padding-left:17px; } .gvdncr-jurisdiction-index{ grid-template-columns:1fr 1fr; } .gvdncr-index-card{ min-height:90px; padding:13px; } .gvdncr-index-card:first-child{ padding-left:13px; } .gvdncr-index-card:nth-child(odd){ border-right:1px solid rgba(255,255,255,.10); } .gvdncr-index-card:nth-child(even){ border-right:0; } .gvdncr-index-card > strong{ font-size:20px; } .gvdncr-index-card b{ font-size:15px; } .gvdncr-hero-statement strong{ font-size:17px; } .gvdncr-city, .gvdncr-twin{ padding:70px 0; } .gvdncr-city-identity h2{ font-size:48px; } .gvdncr-city-content h3{ font-size:35px; } .gvdncr-lead{ font-size:16px; line-height:1.75; } .gvdncr-info-panel{ grid-template-columns:1fr; padding:20px; } .gvdncr-market-grid, .gvdncr-corridor-grid{ grid-template-columns:1fr; } .gvdncr-market-grid > div, .gvdncr-corridor-grid > div{ min-height:auto; } .gvdncr-institutional{ grid-template-columns:1fr; } .gvdncr-brand-heading, .gvdncr-fmv-heading{ display:block; } .gvdncr-brand-heading strong, .gvdncr-fmv-heading strong{ display:block; margin-top:7px; } .gvdncr-premium-equation{ gap:6px; } .gvdncr-premium-equation span, .gvdncr-premium-equation strong{ font-size:15px; } .gvdncr-builder-panel{ grid-template-columns:1fr; } .gvdncr-fmv-items{ grid-template-columns:1fr; } .gvdncr-twin-heading{ grid-template-columns:1fr; gap:22px; } .gvdncr-twin-heading h2{ font-size:36px; } .gvdncr-twin-card{ padding:24px; } .gvdncr-integrated-band{ grid-template-columns:1fr; } .gvdncr-final{ padding:70px 0; } .gvdncr-final-heading h2{ font-size:38px; } .gvdncr-final-heading p{ font-size:15px; line-height:1.75; } .gvdncr-framework{ grid-template-columns:1fr; } .gvdncr-framework > div{ min-height:auto; } .gvdncr-final-actions{ flex-direction:column; align-items:stretch; } .gvdncr-cta, .gvdncr-phone{ width:100%; justify-content:center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gvdncr-hero h1{ font-size:36px; } .gvdncr-eyebrow{ font-size:15px; } .gvdncr-jurisdiction-index{ grid-template-columns:1fr; } .gvdncr-index-card, .gvdncr-index-card:first-child{ padding:13px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gvdncr-index-card:last-child{ border-bottom:0; } .gvdncr-city-identity h2{ font-size:42px; } .gvdncr-city-content h3{ font-size:31px; } .gvdncr-twin-heading h2{ font-size:32px; } .gvdncr-twin-card h3{ font-size:30px; } .gvdncr-final-heading h2{ font-size:33px; } }/* ========================================================= DELHI BANK CONCENTRATION & STATUTORY CONTEXTS UNIQUE NAMESPACE: gvdbs- ROYAL PALETTE #092f62 Primary Navy #061d3d Deep Navy #04152d Dark Navy #b97800 Primary Gold #d99a16 Gold #f0b429 Bright Gold MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .gvdbs-hero, .gvdbs-bank-section, .gvdbs-tax-section, .gvdbs-sarfaesi-section, .gvdbs-rera-section, .gvdbs-final{ position:relative; width:100%; overflow:hidden; } .gvdbs-hero *, .gvdbs-bank-section *, .gvdbs-tax-section *, .gvdbs-sarfaesi-section *, .gvdbs-rera-section *, .gvdbs-final *{ box-sizing:border-box; } .gvdbs-hero a, .gvdbs-bank-section a, .gvdbs-tax-section a, .gvdbs-sarfaesi-section a, .gvdbs-rera-section a, .gvdbs-final a{ text-decoration:none; } /* ========================================================= HERO ========================================================= */ .gvdbs-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 82% 18%, rgba(240,180,41,.13), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gvdbs-hero-grid{ position:absolute; inset:0; opacity:.5; background-image: linear-gradient( rgba(240,180,41,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(240,180,41,.035) 1px, transparent 1px ); background-size:70px 70px; } .gvdbs-hero-orbit{ position:absolute; border:1px solid rgba(240,180,41,.11); border-radius:50%; } .gvdbs-hero-orbit-one{ width:550px; height:550px; right:-270px; top:-170px; } .gvdbs-hero-orbit-two{ width:310px; height:310px; right:-150px; top:-50px; } .gvdbs-hero-inner{ position:relative; z-index:2; max-width:1150px; margin:auto; } .gvdbs-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:28px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gvdbs-eyebrow span{ width:45px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvdbs-eyebrow i{ font-style:normal; opacity:.5; } .gvdbs-hero h1{ max-width:1000px; margin:0; color:#ffffff; font-size:clamp(48px,7vw,82px); font-weight:760; line-height:1; letter-spacing:-4px; } .gvdbs-hero h1 span{ display:block; color:#f0b429; } .gvdbs-hero-lead{ max-width:880px; margin:37px 0 0; padding-left:24px; border-left:2px solid #b97800; color:#d3dfeb; font-size:18px; line-height:1.8; } .gvdbs-hero-lead strong{ color:#ffffff; font-weight:800; } /* ========================================================= HERO STATS ========================================================= */ .gvdbs-hero-line{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1000px; margin-top:52px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gvdbs-hero-line div{ min-height:105px; padding:19px 22px; border-right:1px solid rgba(255,255,255,.10); } .gvdbs-hero-line div:first-child{ padding-left:0; } .gvdbs-hero-line div:last-child{ border-right:0; } .gvdbs-hero-line strong{ display:block; color:#f0b429; font-size:28px; font-weight:900; } .gvdbs-hero-line span{ display:block; margin-top:6px; color:#b9c8d6; font-size:15px; line-height:1.45; } /* ========================================================= COMMON SECTION HEADING ========================================================= */ .gvdbs-section-heading{ display:grid; grid-template-columns:82px minmax(0,1fr); gap:28px; align-items:start; margin-bottom:50px; } .gvdbs-section-number{ display:flex; align-items:center; justify-content:center; width:68px; height:68px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:23px; font-weight:900; } .gvdbs-section-kicker{ display:block; margin-bottom:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gvdbs-section-heading h2, .gvdbs-sarfaesi-heading h2, .gvdbs-rera-intro h2{ max-width:900px; margin:0; color:#061d3d; font-size:clamp(38px,5vw,61px); font-weight:730; line-height:1.05; letter-spacing:-2px; } .gvdbs-section-heading h2 strong, .gvdbs-sarfaesi-heading h2 strong, .gvdbs-rera-intro h2 strong{ color:#b97800; } /* ========================================================= SECTION 01 — BANKING ========================================================= */ .gvdbs-bank-section{ padding:110px 0; background: linear-gradient( 180deg, #ffffff 0%, #f5f8fb 100% ); } .gvdbs-bank-watermark{ position:absolute; right:-70px; top:60px; color:rgba(9,47,98,.025); font-size:190px; font-weight:950; line-height:1; } .gvdbs-bank-intro{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.55fr); gap:55px; align-items:stretch; } .gvdbs-bank-intro-main{ padding-left:28px; border-left:3px solid #b97800; } .gvdbs-bank-intro-main p{ margin:0 0 22px; color:#526274; font-size:17px; line-height:1.85; } .gvdbs-bank-intro-main p:last-child{ margin-bottom:0; } .gvdbs-bank-intro-main strong{ color:#092f62; } /* ========================================================= HEAD OFFICE CARD ========================================================= */ .gvdbs-head-office-card{ position:relative; min-height:285px; padding:28px; border-radius:12px; color:#ffffff; overflow:hidden; background: radial-gradient( circle at 85% 15%, rgba(240,180,41,.15), transparent 30% ), linear-gradient( 145deg, #04152d, #092f62 ); box-shadow:0 22px 45px rgba(6,29,61,.16); } .gvdbs-card-label{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdbs-head-office-icon{ display:flex; align-items:center; justify-content:center; width:68px; height:68px; margin:25px 0 18px; border:1px solid rgba(240,180,41,.50); border-radius:50%; color:#f0b429; font-size:18px; font-weight:900; } .gvdbs-head-office-card > strong{ display:block; color:#ffffff; font-size:27px; line-height:1.15; } .gvdbs-head-office-card p{ max-width:300px; margin:14px 0 0; color:#c2d0de; font-size:15px; line-height:1.65; } /* ========================================================= BANK NETWORK ========================================================= */ .gvdbs-bank-network{ margin-top:55px; padding:28px; border:1px solid rgba(9,47,98,.12); border-radius:12px; background:#ffffff; box-shadow:0 15px 40px rgba(6,29,61,.06); } .gvdbs-network-title{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:19px; border-bottom:1px solid rgba(9,47,98,.10); } .gvdbs-network-title span{ color:#697789; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdbs-network-title strong{ color:#b97800; font-size:15px; letter-spacing:1px; } .gvdbs-bank-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; } .gvdbs-bank-chip{ display:flex; flex-direction:column; justify-content:center; min-height:85px; padding:14px 15px; border:1px solid rgba(9,47,98,.09); border-radius:7px; background:#f7f9fb; transition: border-color .2s ease, transform .2s ease; } .gvdbs-bank-chip:hover{ transform:translateY(-3px); border-color:rgba(185,120,0,.45); } .gvdbs-bank-chip b{ color:#092f62; font-size:18px; font-weight:900; } .gvdbs-bank-chip span{ margin-top:4px; color:#687789; font-size:15px; line-height:1.35; } /* ========================================================= BANK STATEMENTS ========================================================= */ .gvdbs-bank-statements{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:32px; background:rgba(9,47,98,.13); } .gvdbs-bank-statements > div{ padding:28px; background:#061d3d; } .gvdbs-stat-number{ display:block; margin-bottom:12px; color:#f0b429; font-size:31px; font-weight:900; } .gvdbs-bank-statements strong{ display:block; color:#ffffff; font-size:19px; } .gvdbs-bank-statements p{ margin:10px 0 0; color:#b9c7d5; font-size:15px; line-height:1.7; } .gvdbs-bank-statements p strong{ display:inline; color:#ffffff; font-size:15px; } /* ========================================================= SECTION 02 — INCOME TAX ========================================================= */ .gvdbs-tax-section{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 90% 20%, rgba(240,180,41,.11), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 58%, #092f62 ); } .gvdbs-tax-pattern{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient( rgba(240,180,41,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(240,180,41,.025) 1px, transparent 1px ); background-size:65px 65px; } .gvdbs-tax-layout{ position:relative; z-index:2; display:grid; grid-template-columns:130px minmax(0,1fr); gap:45px; } .gvdbs-tax-side{ position:relative; } .gvdbs-gold-number{ color:#f0b429; } .gvdbs-tax-side .gold-number{ color:#f0b429; border-color:rgba(240,180,41,.45); } .gvdbs-light-kicker{ color:#f0b429; } .gvdbs-tax-vertical{ margin-top:35px; color:rgba(240,180,41,.15); font-size:76px; font-weight:950; letter-spacing:4px; writing-mode:vertical-rl; } .gvdbs-tax-content{ max-width:1000px; } .gvdbs-tax-content h2{ margin:0 0 25px; color:#ffffff; font-size:clamp(40px,5vw,64px); line-height:1.03; letter-spacing:-2px; } .gvdbs-tax-content h2 strong{ color:#f0b429; } .gvdbs-tax-lead{ max-width:900px; margin:0; color:#cad7e4; font-size:18px; line-height:1.8; } .gvdbs-tax-lead strong{ color:#ffffff; } /* ========================================================= TAX APPOINTMENT ========================================================= */ .gvdbs-tax-appointment{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:23px; margin-top:42px; padding:25px; border:1px solid rgba(240,180,41,.20); border-left:4px solid #f0b429; background:rgba(255,255,255,.035); } .gvdbs-tax-seal{ display:flex; align-items:center; justify-content:center; width:65px; height:65px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:18px; font-weight:900; } .gvdbs-tax-appointment span, .gvdbs-ao-panel span, .gvdbs-integrated span{ display:block; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdbs-tax-appointment h3{ margin:8px 0 8px; color:#ffffff; font-size:25px; } .gvdbs-tax-appointment h3 small{ display:inline-block; margin-left:9px; color:#aebdcc; font-size:15px; font-weight:500; } .gvdbs-tax-appointment p{ margin:0; color:#b9c8d6; font-size:15px; line-height:1.7; } .gvdbs-tax-appointment p strong{ color:#ffffff; } /* ========================================================= TAX CARDS ========================================================= */ .gvdbs-tax-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:28px; background:rgba(240,180,41,.14); } .gvdbs-tax-cards article{ min-height:230px; padding:25px 22px; background:#061d3d; } .gvdbs-tax-cards article > span{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; margin-bottom:20px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdbs-tax-cards h3{ margin:0 0 11px; color:#ffffff; font-size:22px; } .gvdbs-tax-cards p{ margin:0; color:#b9c7d5; font-size:15px; line-height:1.7; } .gvdbs-tax-cards p strong{ color:#ffffff; } /* ========================================================= AO PANEL ========================================================= */ .gvdbs-ao-panel{ display:grid; grid-template-columns:70px minmax(0,1fr); gap:22px; margin-top:32px; padding:27px; border-radius:10px; background: linear-gradient( 100deg, rgba(185,120,0,.12), rgba(255,255,255,.035) ); } .gvdbs-ao-mark{ display:flex; align-items:center; justify-content:center; width:62px; height:62px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:17px; font-weight:900; } .gvdbs-ao-panel h3{ margin:8px 0 10px; color:#ffffff; font-size:23px; } .gvdbs-ao-panel p{ max-width:850px; margin:0; color:#bdcad7; font-size:15px; line-height:1.75; } .gvdbs-ao-panel p strong{ color:#ffffff; } /* ========================================================= SECTION 03 — SARFAESI ========================================================= */ .gvdbs-sarfaesi-section{ padding:110px 0; background: linear-gradient( 180deg, #ffffff, #f5f8fb ); } .gvdbs-sarfaesi-heading{ display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:40px; align-items:center; margin-bottom:48px; } .gvdbs-sarfaesi-heading p{ max-width:850px; margin:21px 0 0; color:#536376; font-size:17px; line-height:1.8; } .gvdbs-sarfaesi-badge{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:145px; height:145px; border-radius:50%; background: linear-gradient( 145deg, #04152d, #092f62 ); box-shadow:0 20px 35px rgba(6,29,61,.14); } .gvdbs-sarfaesi-badge strong{ color:#f0b429; font-size:35px; font-weight:900; } .gvdbs-sarfaesi-badge span{ margin-top:4px; color:#bdcbd9; text-align:center; font-size:15px; line-height:1.4; } /* ========================================================= SECURITY GRID ========================================================= */ .gvdbs-security-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .gvdbs-security-card{ position:relative; min-height:265px; padding:27px 23px; border:1px solid rgba(9,47,98,.12); border-radius:10px; background:#ffffff; box-shadow:0 13px 30px rgba(6,29,61,.055); transition: transform .25s ease, border-color .25s ease; } .gvdbs-security-card:hover{ transform:translateY(-5px); border-color:rgba(185,120,0,.42); } .gvdbs-security-card > span{ display:block; margin-bottom:50px; color:#b97800; font-size:15px; font-weight:900; } .gvdbs-security-card > strong{ display:block; color:#061d3d; font-size:23px; } .gvdbs-security-card p{ margin:11px 0 0; color:#59697a; font-size:15px; line-height:1.7; } .gvdbs-security-card p strong{ color:#092f62; } /* ========================================================= SARFAESI ANALYSIS ========================================================= */ .gvdbs-sarfaesi-analysis{ margin-top:38px; padding:31px; border-radius:11px; background: linear-gradient( 135deg, #04152d, #092f62 ); } .gvdbs-analysis-heading > span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdbs-analysis-heading h3{ margin:8px 0 0; color:#ffffff; font-size:27px; } .gvdbs-analysis-items{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:27px; background:rgba(240,180,41,.15); } .gvdbs-analysis-items > div{ padding:24px; background:#061d3d; } .gvdbs-analysis-items b{ color:#f0b429; font-size:21px; } .gvdbs-analysis-items p{ margin:10px 0 0; color:#bbc8d6; font-size:15px; line-height:1.7; } .gvdbs-analysis-items p strong{ color:#ffffff; } /* ========================================================= SARFAESI NOTE ========================================================= */ .gvdbs-sarfaesi-note{ display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:25px; padding:22px 25px; border-left:3px solid #b97800; background:#ffffff; } .gvdbs-sarfaesi-note span{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdbs-sarfaesi-note strong{ max-width:760px; color:#092f62; font-size:17px; line-height:1.5; } .gvdbs-sarfaesi-note em{ color:#b97800; font-style:normal; } /* ========================================================= SECTION 04 — RERA ========================================================= */ .gvdbs-rera-section{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 15% 20%, rgba(240,180,41,.09), transparent 28% ), linear-gradient( 135deg, #061d3d, #04152d ); } .gvdbs-rera-background{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:65px 65px; } .gvdbs-rera-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:70px; } .gvdbs-rera-intro{ align-self:start; position:sticky; top:35px; } .gvdbs-rera-intro .gvdbs-section-number{ color:#f0b429; border-color:rgba(240,180,41,.45); margin-bottom:25px; } .gvdbs-rera-intro .gvdbs-section-kicker{ color:#f0b429; } .gvdbs-rera-intro h2{ color:#ffffff; font-size:clamp(38px,4.5vw,57px); } .gvdbs-rera-intro h2 strong{ color:#f0b429; } .gvdbs-rera-intro p{ max-width:500px; margin:23px 0 0; color:#c0cedb; font-size:16px; line-height:1.8; } /* ========================================================= RERA JURISDICTIONS ========================================================= */ .gvdbs-rera-jurisdictions{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(240,180,41,.14); } .gvdbs-rera-jurisdictions > div{ min-height:205px; padding:23px 20px; background:#061d3d; } .gvdbs-rera-jurisdictions span{ display:block; margin-bottom:17px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdbs-rera-jurisdictions strong{ display:block; color:#ffffff; font-size:21px; } .gvdbs-rera-jurisdictions p{ margin:10px 0 0; color:#aebdcb; font-size:15px; line-height:1.65; } .gvdbs-rera-jurisdictions p strong{ display:inline; color:#ffffff; font-size:15px; } /* ========================================================= CONSUMER PANEL ========================================================= */ .gvdbs-consumer-panel{ display:grid; grid-template-columns:70px minmax(0,1fr); gap:22px; margin-top:24px; padding:27px; border:1px solid rgba(240,180,41,.20); background:rgba(255,255,255,.035); } .gvdbs-consumer-icon{ display:flex; align-items:center; justify-content:center; width:62px; height:62px; border:1px solid rgba(240,180,41,.42); border-radius:50%; color:#f0b429; font-size:21px; font-weight:900; } .gvdbs-consumer-panel span{ display:block; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.1px; } .gvdbs-consumer-panel h3{ margin:8px 0 10px; color:#ffffff; font-size:24px; } .gvdbs-consumer-panel p{ margin:0; color:#bdcad8; font-size:15px; line-height:1.75; } .gvdbs-consumer-panel p strong{ color:#ffffff; } /* ========================================================= INTEGRATED ========================================================= */ .gvdbs-integrated{ display:grid; grid-template-columns:35px minmax(0,1fr); gap:20px; margin-top:33px; } .gvdbs-integrated-line{ position:relative; } .gvdbs-integrated-line:before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background: linear-gradient( 180deg, #b97800, #f0b429, transparent ); } .gvdbs-integrated h3{ margin:8px 0 10px; color:#ffffff; font-size:25px; } .gvdbs-integrated p{ max-width:850px; margin:0; color:#bdcad8; font-size:15px; line-height:1.75; } .gvdbs-integrated p strong{ color:#ffffff; } /* ========================================================= FINAL CTA ========================================================= */ .gvdbs-final{ padding:85px 0; color:#ffffff; background: radial-gradient( circle at 85% 50%, rgba(240,180,41,.13), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvdbs-final-ring{ position:absolute; right:-230px; top:-170px; width:500px; height:500px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gvdbs-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:center; } .gvdbs-final-copy > span{ display:block; margin-bottom:11px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvdbs-final-copy h2{ max-width:800px; margin:0 0 17px; color:#ffffff; font-size:clamp(37px,4.8vw,59px); line-height:1.05; letter-spacing:-1.8px; } .gvdbs-final-copy h2 strong{ color:#f0b429; } .gvdbs-final-copy p{ max-width:820px; margin:0; color:#c6d3e0; font-size:16px; line-height:1.8; } .gvdbs-final-copy p strong{ color:#ffffff; } /* ========================================================= CTA BUTTONS ========================================================= */ .gvdbs-final-actions{ display:flex; flex-direction:column; gap:12px; min-width:250px; } .gvdbs-advice-button, .gvdbs-phone-button{ display:flex; align-items:center; justify-content:center; min-height:64px; border-radius:8px; } .gvdbs-advice-button{ gap:13px; color:#04152d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 30px rgba(0,0,0,.25); } .gvdbs-advice-button:hover{ color:#04152d; transform:translateY(-2px); } .gvdbs-advice-button span{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:rgba(4,21,45,.13); font-size:18px; } .gvdbs-advice-button strong{ font-size:16px; } .gvdbs-phone-button{ gap:13px; padding:8px 18px; border:1px solid rgba(240,180,41,.48); color:#ffffff; } .gvdbs-phone-button:hover{ color:#ffffff; border-color:#f0b429; } .gvdbs-phone-button > span{ color:#f0b429; font-size:19px; } .gvdbs-phone-button strong{ display:block; font-size:16px; } .gvdbs-phone-button small{ display:block; margin-top:3px; color:#b8c6d4; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1100px){ .gvdbs-bank-grid{ grid-template-columns:repeat(3,1fr); } .gvdbs-security-grid{ grid-template-columns:repeat(2,1fr); } .gvdbs-hero-line{ grid-template-columns:repeat(2,1fr); } .gvdbs-hero-line div:nth-child(2){ border-right:0; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gvdbs-hero, .gvdbs-bank-section, .gvdbs-tax-section, .gvdbs-sarfaesi-section, .gvdbs-rera-section{ padding:80px 0; } .gvdbs-hero h1{ font-size:61px; } .gvdbs-bank-intro{ grid-template-columns:1fr; gap:30px; } .gvdbs-tax-layout{ grid-template-columns:75px minmax(0,1fr); gap:30px; } .gvdbs-tax-vertical{ font-size:57px; } .gvdbs-tax-cards{ grid-template-columns:1fr; } .gvdbs-rera-layout{ grid-template-columns:1fr; gap:40px; } .gvdbs-rera-intro{ position:relative; top:auto; } .gvdbs-final-inner{ grid-template-columns:1fr; gap:35px; } .gvdbs-final-actions{ flex-direction:row; width:100%; } .gvdbs-advice-button, .gvdbs-phone-button{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gvdbs-hero, .gvdbs-bank-section, .gvdbs-tax-section, .gvdbs-sarfaesi-section, .gvdbs-rera-section{ padding:65px 0; } .gvdbs-hero h1{ font-size:43px; letter-spacing:-2px; } .gvdbs-hero-lead{ padding-left:17px; font-size:16px; line-height:1.75; } .gvdbs-hero-line{ grid-template-columns:repeat(2,1fr); } .gvdbs-hero-line div{ min-height:90px; padding:15px; } .gvdbs-hero-line div:nth-child(odd){ padding-left:0; } .gvdbs-hero-line div:nth-child(even){ border-right:0; } .gvdbs-hero-line strong{ font-size:24px; } .gvdbs-section-heading{ grid-template-columns:1fr; gap:20px; margin-bottom:35px; } .gvdbs-section-heading h2, .gvdbs-sarfaesi-heading h2, .gvdbs-rera-intro h2, .gvdbs-tax-content h2{ font-size:36px; } .gvdbs-bank-intro-main{ padding-left:17px; } .gvdbs-bank-intro-main p{ font-size:15px; line-height:1.75; } .gvdbs-bank-network{ padding:19px 14px; } .gvdbs-network-title{ display:block; } .gvdbs-network-title strong{ display:block; margin-top:7px; } .gvdbs-bank-grid{ grid-template-columns:repeat(2,1fr); } .gvdbs-bank-statements{ grid-template-columns:1fr; } .gvdbs-tax-layout{ grid-template-columns:1fr; gap:25px; } .gvdbs-tax-vertical{ display:none; } .gvdbs-tax-lead{ font-size:15px; line-height:1.75; } .gvdbs-tax-appointment{ grid-template-columns:1fr; padding:20px; } .gvdbs-tax-appointment h3 small{ display:block; margin:5px 0 0; } .gvdbs-ao-panel{ grid-template-columns:1fr; padding:21px; } .gvdbs-sarfaesi-heading{ grid-template-columns:1fr; gap:25px; } .gvdbs-sarfaesi-badge{ width:110px; height:110px; } .gvdbs-security-grid{ grid-template-columns:1fr; } .gvdbs-security-card{ min-height:auto; } .gvdbs-security-card > span{ margin-bottom:30px; } .gvdbs-sarfaesi-analysis{ padding:21px 16px; } .gvdbs-analysis-items{ grid-template-columns:1fr; } .gvdbs-sarfaesi-note{ display:block; } .gvdbs-sarfaesi-note strong{ display:block; margin-top:9px; } .gvdbs-rera-jurisdictions{ grid-template-columns:1fr; } .gvdbs-rera-jurisdictions > div{ min-height:auto; } .gvdbs-consumer-panel{ grid-template-columns:1fr; padding:21px; } .gvdbs-integrated{ grid-template-columns:25px minmax(0,1fr); } .gvdbs-final{ padding:65px 0; } .gvdbs-final-copy h2{ font-size:35px; } .gvdbs-final-copy p{ font-size:15px; } .gvdbs-final-actions{ flex-direction:column; } .gvdbs-advice-button, .gvdbs-phone-button{ width:100%; flex:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gvdbs-hero h1{ font-size:36px; } .gvdbs-eyebrow{ font-size:15px; } .gvdbs-bank-grid{ grid-template-columns:1fr; } .gvdbs-section-number{ width:59px; height:59px; font-size:20px; } .gvdbs-section-heading h2, .gvdbs-sarfaesi-heading h2, .gvdbs-rera-intro h2, .gvdbs-tax-content h2{ font-size:32px; } .gvdbs-tax-cards article{ min-height:auto; } .gvdbs-final-copy h2{ font-size:32px; } } /* ========================================================= DELHI STATUTORY CONTEXTS UNIQUE CSS NAMESPACE: gdsc- ROYAL COLOUR SYSTEM Primary Navy: #092f62 Dark Navy: #061d3d Deep Navy: #04152d Gold: #b97800 Gold: #d99a16 Bright Gold: #f0b429 Minimum font-size: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gdsc-hero, .gdsc-intro, .gdsc-income, .gdsc-50c, .gdsc-55, .gdsc-leasehold, .gdsc-dda, .gdsc-ncr, .gdsc-checklist, .gdsc-final{ position:relative; width:100%; overflow:hidden; } .gdsc-hero *, .gdsc-intro *, .gdsc-income *, .gdsc-50c *, .gdsc-55 *, .gdsc-leasehold *, .gdsc-dda *, .gdsc-ncr *, .gdsc-checklist *, .gdsc-final *{ box-sizing:border-box; } .gdsc-hero a, .gdsc-final a{ text-decoration:none; } /* ========================================================= HERO ========================================================= */ .gdsc-hero{ padding:110px 0 90px; color:#ffffff; background: radial-gradient( circle at 83% 20%, rgba(240,180,41,.14), transparent 27% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gdsc-hero-grid{ position:absolute; inset:0; opacity:.45; background-image: linear-gradient( rgba(240,180,41,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(240,180,41,.035) 1px, transparent 1px ); background-size:70px 70px; } .gdsc-hero-glow{ position:absolute; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gdsc-hero-glow-one{ width:600px; height:600px; right:-300px; top:-280px; } .gdsc-hero-glow-two{ width:330px; height:330px; right:-165px; top:-145px; } .gdsc-hero-inner{ position:relative; z-index:2; max-width:1120px; margin:auto; } .gdsc-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:28px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gdsc-eyebrow span{ width:48px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gdsc-eyebrow i{ font-style:normal; opacity:.45; } .gdsc-hero h1{ max-width:950px; margin:0; color:#ffffff; font-size:clamp(52px,7vw,84px); font-weight:760; line-height:.98; letter-spacing:-4px; } .gdsc-hero h1 strong{ display:block; color:#f0b429; font-weight:760; } .gdsc-hero-lead{ max-width:880px; margin:35px 0 0; padding-left:24px; border-left:2px solid #b97800; color:#ccd9e6; font-size:18px; line-height:1.8; } .gdsc-hero-lead strong{ color:#ffffff; } .gdsc-hero-rule{ display:flex; align-items:center; gap:14px; max-width:900px; margin-top:38px; } .gdsc-hero-rule span{ width:40px; height:1px; background:#b97800; } .gdsc-hero-rule strong{ color:#f0b429; font-size:15px; letter-spacing:1.2px; } .gdsc-hero-points{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1000px; margin-top:38px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gdsc-hero-points > div{ min-height:115px; padding:22px; border-right:1px solid rgba(255,255,255,.10); } .gdsc-hero-points > div:first-child{ padding-left:0; } .gdsc-hero-points > div:last-child{ border-right:0; } .gdsc-hero-points b{ display:block; color:#f0b429; font-size:25px; font-weight:900; } .gdsc-hero-points span{ display:block; max-width:180px; margin-top:7px; color:#aebdcb; font-size:15px; line-height:1.5; } /* ========================================================= COMMON ========================================================= */ .gdsc-kicker{ display:block; margin-bottom:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gdsc-gold{ color:#f0b429; } .gdsc-number{ display:flex; align-items:center; justify-content:center; width:67px; height:67px; border:1px solid rgba(185,120,0,.40); border-radius:50%; color:#b97800; font-size:22px; font-weight:900; } .gdsc-section-heading{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:27px; align-items:start; margin-bottom:50px; } .gdsc-section-heading h2, .gdsc-50c-header h2, .gdsc-dda-header h2, .gdsc-ncr-heading h2, .gdsc-checklist-heading h2{ max-width:950px; margin:0; color:#061d3d; font-size:clamp(38px,5vw,62px); font-weight:730; line-height:1.04; letter-spacing:-2.3px; } .gdsc-section-heading h2 strong, .gdsc-50c-header h2 strong, .gdsc-dda-header h2 strong, .gdsc-ncr-heading h2 strong, .gdsc-checklist-heading h2 strong{ color:#b97800; } .gdsc-section-heading p{ max-width:850px; margin:20px 0 0; color:#596a7c; font-size:17px; line-height:1.8; } /* ========================================================= INTRO ========================================================= */ .gdsc-intro{ padding:105px 0; background: linear-gradient( 180deg, #ffffff, #f5f8fb ); } .gdsc-intro-layout{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:45px; max-width:1100px; margin:auto; } .gdsc-intro-index{ display:flex; flex-direction:column; align-items:flex-start; } .gdsc-intro-index span{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:2px; } .gdsc-intro-index strong{ margin-top:18px; color:rgba(9,47,98,.08); font-size:100px; line-height:.8; font-weight:950; } .gdsc-intro-content{ padding-left:35px; border-left:2px solid #b97800; } .gdsc-intro-content h2{ max-width:850px; margin:0; color:#061d3d; font-size:clamp(38px,5vw,58px); line-height:1.05; letter-spacing:-2px; } .gdsc-intro-content h2 strong{ color:#b97800; } .gdsc-intro-content p{ max-width:900px; margin:25px 0 0; color:#58697a; font-size:17px; line-height:1.85; } .gdsc-intro-content p strong{ color:#092f62; } .gdsc-intro-highlight{ display:flex; flex-direction:column; gap:8px; margin-top:34px; padding:23px 25px; border-radius:8px; background:#061d3d; } .gdsc-intro-highlight span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gdsc-intro-highlight strong{ color:#ffffff; font-size:18px; line-height:1.5; } /* ========================================================= SECTION 01 — INCOME TAX ========================================================= */ .gdsc-income{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 90% 15%, rgba(240,180,41,.12), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .gdsc-section-bg-number{ position:absolute; right:-60px; top:-50px; color:rgba(240,180,41,.035); font-size:300px; line-height:1; font-weight:950; } .gdsc-light-heading{ position:relative; z-index:2; } .gdsc-light-heading h2{ color:#ffffff; } .gdsc-light-heading h2 strong{ color:#f0b429; } .gdsc-light-heading p{ color:#bdcad8; } .gdsc-light-heading .gdsc-number{ color:#f0b429; border-color:rgba(240,180,41,.45); } .gdsc-income-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.5fr); gap:40px; } .gdsc-law-card{ display:grid; grid-template-columns:75px minmax(0,1fr); gap:22px; padding:28px; border-left:3px solid #f0b429; background:rgba(255,255,255,.045); } .gdsc-law-symbol{ display:flex; align-items:center; justify-content:center; width:66px; height:66px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:21px; font-weight:900; } .gdsc-law-card span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gdsc-law-card h3{ margin:7px 0 9px; color:#ffffff; font-size:25px; } .gdsc-law-card p{ margin:0; color:#b9c7d5; font-size:15px; line-height:1.75; } .gdsc-law-card p strong{ color:#ffffff; } .gdsc-income-text{ margin-top:30px; } .gdsc-income-text p{ margin:0 0 20px; color:#bdcad7; font-size:16px; line-height:1.8; } .gdsc-income-text p strong{ color:#ffffff; } .gdsc-income-side{ padding:26px; border:1px solid rgba(240,180,41,.18); background:rgba(255,255,255,.035); } .gdsc-side-label{ padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.10); color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gdsc-side-item{ padding:19px 0; border-bottom:1px solid rgba(255,255,255,.08); } .gdsc-side-item:last-child{ border-bottom:0; } .gdsc-side-item b{ display:block; color:#ffffff; font-size:18px; } .gdsc-side-item span{ display:block; margin-top:5px; color:#aebdcb; font-size:15px; line-height:1.5; } /* ========================================================= SECTION 02 — 50C ========================================================= */ .gdsc-50c{ padding:110px 0; background:#ffffff; } .gdsc-50c-header{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:27px; align-items:start; margin-bottom:55px; } .gdsc-50c-stage{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:60px; align-items:center; } .gdsc-stage-label{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gdsc-50c-left h3{ max-width:700px; margin:13px 0 22px; color:#061d3d; font-size:35px; line-height:1.15; } .gdsc-50c-left h3 strong{ color:#b97800; } .gdsc-50c-left p{ max-width:800px; margin:0 0 17px; color:#59697a; font-size:16px; line-height:1.8; } .gdsc-50c-left p strong{ color:#092f62; } .gdsc-50c-meter{ position:relative; padding:38px 30px; border-radius:12px; background: linear-gradient( 145deg, #04152d, #092f62 ); box-shadow:0 25px 50px rgba(6,29,61,.16); } .gdsc-meter-top, .gdsc-meter-bottom{ display:flex; align-items:center; justify-content:space-between; } .gdsc-meter-top span, .gdsc-meter-bottom span{ color:#bdcbd8; font-size:15px; font-weight:800; letter-spacing:1px; } .gdsc-meter-top strong, .gdsc-meter-bottom strong{ color:#f0b429; font-size:31px; font-weight:900; } .gdsc-meter-line{ height:7px; margin:22px 0; border-radius:20px; background:rgba(255,255,255,.12); overflow:hidden; } .gdsc-meter-line span{ display:block; width:82%; height:100%; background:#ffffff; } .gdsc-meter-line-gold span{ width:63%; background:#f0b429; } .gdsc-meter-middle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:-2px auto; border:1px solid rgba(240,180,41,.4); border-radius:50%; color:#f0b429; background:#061d3d; font-size:15px; font-weight:900; } .gdsc-zone-strip{ display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:58px; padding:24px; border-top:1px solid rgba(9,47,98,.12); border-bottom:1px solid rgba(9,47,98,.12); } .gdsc-zone-strip > span{ color:#092f62; font-size:15px; font-weight:850; letter-spacing:1px; } .gdsc-zone-strip > div{ display:flex; gap:8px; } .gdsc-zone-strip b{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border:1px solid rgba(185,120,0,.35); border-radius:50%; color:#b97800; font-size:15px; } .gdsc-50c-bottom{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:28px; background:rgba(9,47,98,.12); } .gdsc-50c-bottom > div{ padding:25px; background:#f7f9fb; } .gdsc-50c-bottom strong{ color:#092f62; font-size:19px; } .gdsc-50c-bottom p{ margin:9px 0 0; color:#627184; font-size:15px; line-height:1.65; } /* ========================================================= SECTION 03 — 55(2)(b) ========================================================= */ .gdsc-55{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 12% 20%, rgba(240,180,41,.10), transparent 28% ), linear-gradient( 135deg, #061d3d, #04152d ); } .gdsc-55-glow{ position:absolute; right:-220px; bottom:-280px; width:600px; height:600px; border:1px solid rgba(240,180,41,.09); border-radius:50%; } .gdsc-55-layout{ position:relative; z-index:2; display:grid; grid-template-columns:130px minmax(0,1fr); gap:40px; } .gdsc-55-number{ display:flex; flex-direction:column; align-items:center; } .gdsc-55-number span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gdsc-55-number strong{ margin-top:15px; color:rgba(240,180,41,.13); font-size:120px; line-height:.75; font-weight:950; } .gdsc-55-content h2{ margin:0; color:#ffffff; font-size:clamp(40px,5vw,63px); line-height:1.03; letter-spacing:-2.5px; } .gdsc-55-content h2 strong{ color:#f0b429; } .gdsc-55-lead{ max-width:850px; margin:24px 0 0; color:#c3d0dd; font-size:18px; line-height:1.8; } .gdsc-55-lead strong{ color:#ffffff; } /* TIMELINE */ .gdsc-timeline{ display:grid; grid-template-columns:1fr 100px 1fr; gap:20px; align-items:center; margin-top:55px; } .gdsc-timeline-point{ padding:25px; border:1px solid rgba(240,180,41,.16); background:rgba(255,255,255,.035); } .gdsc-timeline-point span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gdsc-timeline-point strong{ display:block; margin-top:9px; color:#ffffff; font-size:22px; } .gdsc-timeline-point p{ margin:9px 0 0; color:#aebdcb; font-size:15px; line-height:1.6; } .gdsc-timeline-line{ position:relative; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gdsc-timeline-line span{ position:absolute; left:50%; top:50%; width:13px; height:13px; transform:translate(-50%,-50%); border:2px solid #f0b429; border-radius:50%; background:#061d3d; } /* 55 BOXES */ .gdsc-55-boxes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:28px; background:rgba(240,180,41,.14); } .gdsc-55-boxes > div{ padding:25px; background:#061d3d; } .gdsc-55-boxes b{ display:block; color:#f0b429; font-size:15px; } .gdsc-55-boxes strong{ display:block; margin-top:15px; color:#ffffff; font-size:19px; } .gdsc-55-boxes p{ margin:9px 0 0; color:#aebdcb; font-size:15px; line-height:1.65; } /* ========================================================= SECTION 04 — NDMC / L&DO ========================================================= */ .gdsc-leasehold{ padding:110px 0; background: linear-gradient( 180deg, #ffffff, #f4f7fa ); } .gdsc-authority-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .gdsc-authority-card{ position:relative; padding:35px; border:1px solid rgba(9,47,98,.12); border-radius:11px; background:#ffffff; box-shadow:0 18px 38px rgba(6,29,61,.06); } .gdsc-authority-dark{ color:#ffffff; background: linear-gradient( 145deg, #04152d, #092f62 ); } .gdsc-authority-top{ display:flex; align-items:center; justify-content:space-between; } .gdsc-authority-top span{ color:#b97800; font-size:15px; font-weight:900; letter-spacing:1.5px; } .gdsc-authority-dark .gdsc-authority-top span{ color:#f0b429; } .gdsc-authority-top b{ color:rgba(9,47,98,.12); font-size:35px; } .gdsc-authority-dark .gdsc-authority-top b{ color:rgba(240,180,41,.15); } .gdsc-authority-card h3{ margin:24px 0 12px; color:#061d3d; font-size:27px; } .gdsc-authority-dark h3{ color:#ffffff; } .gdsc-authority-card p{ margin:0; color:#5a6a7b; font-size:15px; line-height:1.75; } .gdsc-authority-dark p{ color:#b9c7d5; } .gdsc-authority-card p strong{ color:#092f62; } .gdsc-authority-dark p strong{ color:#ffffff; } .gdsc-authority-card ul{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:25px 0 0; padding:0; list-style:none; } .gdsc-authority-card li{ padding:11px 12px; border:1px solid rgba(9,47,98,.08); color:#092f62; font-size:15px; } .gdsc-authority-dark li{ border-color:rgba(240,180,41,.15); color:#d3dee8; } .gdsc-tenure-equation{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:38px; padding:27px; color:#ffffff; background:#061d3d; } .gdsc-tenure-equation span{ color:#c1cedb; font-size:15px; font-weight:800; letter-spacing:.7px; } .gdsc-tenure-equation strong{ color:#f0b429; font-size:25px; } .gdsc-tenure-equation .gdsc-equation-result{ color:#f0b429; } /* ========================================================= SECTION 05 — DDA / CANTONMENT ========================================================= */ .gdsc-dda{ padding:110px 0; background:#ffffff; } .gdsc-dda-header{ display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:50px; } .gdsc-dda-mark{ display:flex; align-items:center; justify-content:center; width:115px; height:115px; border:1px solid rgba(185,120,0,.35); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; letter-spacing:2px; } .gdsc-dda-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .gdsc-dda-card{ padding:35px; border:1px solid rgba(9,47,98,.11); border-radius:11px; background:#f7f9fb; } .gdsc-dda-card.gdsc-cantonment{ background: linear-gradient( 145deg, #04152d, #092f62 ); } .gdsc-dda-icon{ display:flex; align-items:center; justify-content:center; width:68px; height:68px; margin-bottom:23px; border:1px solid rgba(185,120,0,.35); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .gdsc-cantonment .gdsc-dda-icon{ color:#f0b429; border-color:rgba(240,180,41,.40); } .gdsc-dda-card > span{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gdsc-cantonment > span{ color:#f0b429; } .gdsc-dda-card h3{ margin:9px 0 13px; color:#061d3d; font-size:27px; } .gdsc-cantonment h3{ color:#ffffff; } .gdsc-dda-card p{ margin:0; color:#5c6d7e; font-size:15px; line-height:1.75; } .gdsc-cantonment p{ color:#b9c7d5; } .gdsc-dda-card p strong{ color:#092f62; } .gdsc-cantonment p strong{ color:#ffffff; } .gdsc-dda-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; } .gdsc-dda-tags b{ padding:8px 12px; border:1px solid rgba(9,47,98,.11); color:#092f62; font-size:15px; } .gdsc-cantonment .gdsc-dda-tags b{ border-color:rgba(240,180,41,.18); color:#d4dee8; } .gdsc-dda-note{ display:grid; grid-template-columns:55px minmax(0,1fr); gap:18px; align-items:center; margin-top:25px; padding:23px; border-left:3px solid #b97800; background:#f7f9fb; } .gdsc-note-icon{ display:flex; align-items:center; justify-content:center; width:45px; height:45px; border-radius:50%; background:#092f62; color:#f0b429; font-size:20px; font-weight:900; } .gdsc-dda-note p{ margin:0; color:#5a6b7c; font-size:15px; line-height:1.7; } .gdsc-dda-note strong{ color:#092f62; } /* ========================================================= SECTION 06 — NCR ========================================================= */ .gdsc-ncr{ padding:110px 0; color:#ffffff; background: radial-gradient( circle at 85% 20%, rgba(240,180,41,.11), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .gdsc-ncr-heading{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:27px; align-items:start; } .gdsc-ncr-heading .gdsc-number{ color:#f0b429; border-color:rgba(240,180,41,.45); } .gdsc-ncr-heading h2{ color:#ffffff; } .gdsc-ncr-heading h2 strong{ color:#f0b429; } .gdsc-ncr-heading p{ max-width:800px; margin:20px 0 0; color:#bdcad8; font-size:17px; line-height:1.75; } .gdsc-ncr-mapline{ display:grid; grid-template-columns:1fr 70px 1fr 70px 1fr; align-items:center; margin-top:58px; } .gdsc-ncr-city{ min-height:180px; padding:27px; border:1px solid rgba(240,180,41,.17); background:rgba(255,255,255,.035); } .gdsc-ncr-city span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gdsc-ncr-city strong{ display:block; margin-top:13px; color:#ffffff; font-size:24px; } .gdsc-ncr-city small{ display:block; margin-top:9px; color:#aebdcb; font-size:15px; line-height:1.5; } .gdsc-ncr-connector{ position:relative; height:2px; background:#b97800; } .gdsc-ncr-connector span{ position:absolute; right:0; top:50%; width:12px; height:12px; transform:translateY(-50%); border:2px solid #f0b429; border-radius:50%; background:#061d3d; } .gdsc-ncr-secondary{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:20px; background:rgba(240,180,41,.13); } .gdsc-ncr-secondary > div{ padding:22px; background:#061d3d; } .gdsc-ncr-secondary strong{ display:block; color:#ffffff; font-size:19px; } .gdsc-ncr-secondary span{ display:block; margin-top:5px; color:#aebdcb; font-size:15px; } .gdsc-ncr-message{ margin-top:28px; padding:29px; border-left:3px solid #f0b429; background:rgba(255,255,255,.035); } .gdsc-ncr-message span{ display:block; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gdsc-ncr-message strong{ display:block; margin-top:9px; color:#ffffff; font-size:22px; } .gdsc-ncr-message p{ max-width:800px; margin:9px 0 0; color:#b9c7d5; font-size:15px; line-height:1.7; } /* ========================================================= SECTION 07 — CHECKLIST ========================================================= */ .gdsc-checklist{ padding:105px 0; background: linear-gradient( 180deg, #ffffff, #f5f8fb ); } .gdsc-checklist-heading{ max-width:900px; margin-bottom:45px; } .gdsc-checklist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .gdsc-checklist-grid > div{ position:relative; min-height:205px; padding:27px; border:1px solid rgba(9,47,98,.10); border-radius:9px; background:#ffffff; box-shadow:0 12px 30px rgba(6,29,61,.045); } .gdsc-checklist-grid span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#061d3d; color:#f0b429; font-size:15px; font-weight:900; } .gdsc-checklist-grid strong{ display:block; margin-top:20px; color:#092f62; font-size:20px; } .gdsc-checklist-grid p{ margin:8px 0 0; color:#637385; font-size:15px; line-height:1.65; } /* ========================================================= FINAL CTA ========================================================= */ .gdsc-final{ padding:90px 0; color:#ffffff; background: radial-gradient( circle at 82% 50%, rgba(240,180,41,.13), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gdsc-final-grid{ position:absolute; inset:0; opacity:.3; background-image: linear-gradient( rgba(240,180,41,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(240,180,41,.025) 1px, transparent 1px ); background-size:65px 65px; } .gdsc-final-circle{ position:absolute; right:-240px; top:-190px; width:500px; height:500px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gdsc-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:center; } .gdsc-final-copy > span{ display:block; margin-bottom:12px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gdsc-final-copy h2{ max-width:850px; margin:0; color:#ffffff; font-size:clamp(39px,5vw,61px); line-height:1.04; letter-spacing:-2px; } .gdsc-final-copy h2 strong{ color:#f0b429; } .gdsc-final-copy p{ max-width:820px; margin:20px 0 0; color:#c2cfdb; font-size:16px; line-height:1.8; } .gdsc-final-copy p strong{ color:#ffffff; } /* ========================================================= CTA ========================================================= */ .gdsc-final-actions{ display:flex; flex-direction:column; gap:12px; min-width:250px; } .gdsc-advice-btn, .gdsc-phone-btn{ display:flex; align-items:center; justify-content:center; min-height:64px; border-radius:8px; } .gdsc-advice-btn{ gap:12px; color:#04152d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow:0 15px 35px rgba(0,0,0,.25); } .gdsc-advice-btn:hover{ color:#04152d; transform:translateY(-2px); } .gdsc-advice-btn span{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:rgba(4,21,45,.13); } .gdsc-advice-btn strong{ font-size:16px; } .gdsc-phone-btn{ gap:13px; padding:8px 18px; border:1px solid rgba(240,180,41,.45); color:#ffffff; } .gdsc-phone-btn:hover{ color:#ffffff; border-color:#f0b429; } .gdsc-phone-btn > span{ color:#f0b429; font-size:19px; } .gdsc-phone-btn strong{ display:block; font-size:16px; } .gdsc-phone-btn small{ display:block; margin-top:3px; color:#b8c6d4; font-size:15px; } /* ========================================================= RESPONSIVE — 1100 ========================================================= */ @media (max-width:1100px){ .gdsc-hero-points{ grid-template-columns:repeat(2,1fr); } .gdsc-hero-points > div:nth-child(2){ border-right:0; } .gdsc-checklist-grid{ grid-template-columns:repeat(2,1fr); } } /* ========================================================= RESPONSIVE — 991 ========================================================= */ @media (max-width:991px){ .gdsc-hero, .gdsc-intro, .gdsc-income, .gdsc-50c, .gdsc-55, .gdsc-leasehold, .gdsc-dda, .gdsc-ncr, .gdsc-checklist{ padding:80px 0; } .gdsc-hero h1{ font-size:62px; } .gdsc-intro-layout{ grid-template-columns:80px minmax(0,1fr); gap:30px; } .gdsc-income-grid{ grid-template-columns:1fr; } .gdsc-50c-stage{ grid-template-columns:1fr; } .gdsc-timeline{ grid-template-columns:1fr; } .gdsc-timeline-line{ width:100%; } .gdsc-ncr-mapline{ grid-template-columns:1fr; gap:0; } .gdsc-ncr-connector{ width:2px; height:35px; margin:auto; background:#b97800; } .gdsc-ncr-connector span{ right:auto; left:50%; top:auto; bottom:0; transform:translate(-50%,0); } .gdsc-final-inner{ grid-template-columns:1fr; gap:35px; } .gdsc-final-actions{ flex-direction:row; } .gdsc-advice-btn, .gdsc-phone-btn{ flex:1; } } /* ========================================================= RESPONSIVE — 767 ========================================================= */ @media (max-width:767px){ .gdsc-hero, .gdsc-intro, .gdsc-income, .gdsc-50c, .gdsc-55, .gdsc-leasehold, .gdsc-dda, .gdsc-ncr, .gdsc-checklist, .gdsc-final{ padding:65px 0; } .gdsc-hero h1{ font-size:44px; letter-spacing:-2.5px; } .gdsc-hero-lead{ font-size:16px; line-height:1.75; padding-left:17px; } .gdsc-hero-rule{ display:block; } .gdsc-hero-rule span{ display:none; } .gdsc-hero-rule strong{ display:block; line-height:1.5; } .gdsc-hero-points{ grid-template-columns:1fr 1fr; } .gdsc-hero-points > div{ padding:16px; } .gdsc-hero-points > div:first-child, .gdsc-hero-points > div:nth-child(3){ padding-left:0; } .gdsc-intro-layout{ grid-template-columns:1fr; } .gdsc-intro-index strong{ font-size:75px; } .gdsc-intro-content{ padding-left:18px; } .gdsc-intro-content h2{ font-size:36px; } .gdsc-intro-content p{ font-size:15px; line-height:1.75; } .gdsc-section-heading, .gdsc-50c-header, .gdsc-ncr-heading{ grid-template-columns:1fr; gap:20px; } .gdsc-section-heading h2, .gdsc-50c-header h2, .gdsc-dda-header h2, .gdsc-ncr-heading h2, .gdsc-checklist-heading h2{ font-size:35px; } .gdsc-law-card{ grid-template-columns:1fr; } .gdsc-50c-left h3{ font-size:29px; } .gdsc-zone-strip{ display:block; } .gdsc-zone-strip > div{ margin-top:17px; flex-wrap:wrap; } .gdsc-50c-bottom, .gdsc-55-boxes, .gdsc-authority-grid, .gdsc-dda-grid, .gdsc-checklist-grid{ grid-template-columns:1fr; } .gdsc-55-layout{ grid-template-columns:1fr; } .gdsc-55-number{ align-items:flex-start; } .gdsc-55-number strong{ font-size:80px; } .gdsc-55-content h2{ font-size:37px; } .gdsc-55-lead{ font-size:16px; } .gdsc-dda-header{ align-items:flex-start; } .gdsc-dda-mark{ width:85px; height:85px; flex-shrink:0; } .gdsc-authority-card{ padding:26px; } .gdsc-authority-card ul{ grid-template-columns:1fr; } .gdsc-tenure-equation{ justify-content:flex-start; gap:12px; } .gdsc-ncr-heading p{ font-size:15px; } .gdsc-ncr-city{ min-height:auto; } .gdsc-ncr-secondary{ grid-template-columns:1fr; } .gdsc-final-copy h2{ font-size:36px; } .gdsc-final-copy p{ font-size:15px; } .gdsc-final-actions{ flex-direction:column; } .gdsc-advice-btn, .gdsc-phone-btn{ width:100%; flex:none; } } /* ========================================================= RESPONSIVE — 480 ========================================================= */ @media (max-width:480px){ .gdsc-hero h1{ font-size:37px; } .gdsc-eyebrow{ font-size:15px; } .gdsc-hero-points{ grid-template-columns:1fr; } .gdsc-hero-points > div{ min-height:auto; padding:17px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); } .gdsc-hero-points > div:last-child{ border-bottom:0; } .gdsc-section-heading h2, .gdsc-50c-header h2, .gdsc-dda-header h2, .gdsc-ncr-heading h2, .gdsc-checklist-heading h2{ font-size:31px; } .gdsc-number{ width:59px; height:59px; font-size:20px; } .gdsc-meter-top strong, .gdsc-meter-bottom strong{ font-size:26px; } .gdsc-dda-header{ flex-direction:column; } .gdsc-final-copy h2{ font-size:32px; } }/* ========================================================= FIVE PROFILES — DELHI'S VALUATION GEOGRAPHY UNIQUE CSS NAMESPACE: gvdp- ROYAL PALETTE #092f62 Primary Navy #061d3d Deep Navy #04152d Dark Navy #b97800 Primary Gold #d99a16 Gold #f0b429 Bright Gold Minimum font-size: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gvdp-intro, .gvdp-profile, .gvdp-summary, .gvdp-final{ position:relative; width:100%; overflow:hidden; } .gvdp-intro *, .gvdp-profile *, .gvdp-summary *, .gvdp-final *{ box-sizing:border-box; } .gvdp-intro a, .gvdp-profile a, .gvdp-summary a, .gvdp-final a{ text-decoration:none; } /* ========================================================= INTRO ========================================================= */ .gvdp-intro{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 85% 20%, rgba(240,180,41,.14), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gvdp-intro-grid{ position:absolute; inset:0; opacity:.28; background-image: linear-gradient( rgba(240,180,41,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(240,180,41,.055) 1px, transparent 1px ); background-size:75px 75px; } .gvdp-intro-orbit{ position:absolute; border:1px solid rgba(240,180,41,.11); border-radius:50%; } .gvdp-orbit-one{ width:620px; height:620px; right:-330px; top:-230px; } .gvdp-orbit-two{ width:390px; height:390px; right:-205px; top:-115px; } .gvdp-intro-inner{ position:relative; z-index:2; max-width:1120px; margin:auto; } .gvdp-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gvdp-eyebrow span{ width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvdp-eyebrow i{ color:rgba(240,180,41,.45); font-style:normal; } .gvdp-intro h1{ max-width:1050px; margin:0; color:#ffffff; font-size:clamp(49px,7vw,82px); font-weight:750; line-height:.99; letter-spacing:-3.8px; } .gvdp-intro h1 span{ display:block; color:#f0b429; } .gvdp-intro-lead{ max-width:850px; margin:36px 0 0; padding-left:23px; border-left:2px solid #b97800; color:#cbd8e5; font-size:18px; line-height:1.8; } .gvdp-intro-lead strong{ color:#ffffff; } /* ========================================================= PROFILE INDEX ========================================================= */ .gvdp-profile-index{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:53px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gvdp-profile-index a{ display:flex; flex-direction:column; gap:7px; min-height:105px; padding:20px 17px; border-right:1px solid rgba(255,255,255,.10); } .gvdp-profile-index a:first-child{ padding-left:0; } .gvdp-profile-index a:last-child{ border-right:0; } .gvdp-profile-index strong{ color:#f0b429; font-size:25px; font-weight:900; } .gvdp-profile-index span{ color:#c7d3df; font-size:15px; line-height:1.4; } .gvdp-profile-index a:hover span{ color:#ffffff; } /* ========================================================= GENERIC PROFILE ========================================================= */ .gvdp-profile{ padding:105px 0; } .gvdp-profile-light{ color:#425266; background: linear-gradient( 180deg, #ffffff 0%, #f5f8fb 100% ); } .gvdp-profile-dark, .gvdp-profile-navy{ color:#c9d5e1; background: radial-gradient( circle at 90% 30%, rgba(240,180,41,.09), transparent 31% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvdp-profile-layout{ display:grid; grid-template-columns:115px minmax(0,1fr); gap:50px; align-items:start; } .gvdp-profile-layout-reverse{ grid-template-columns:115px minmax(0,1fr); } .gvdp-profile-mark{ position:sticky; top:45px; display:flex; flex-direction:column; align-items:center; text-align:center; } .gvdp-profile-mark span{ color:#8a98a7; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-profile-mark strong{ display:flex; align-items:center; justify-content:center; width:88px; height:88px; margin:12px 0; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:31px; font-weight:900; } .gvdp-profile-mark small{ color:#8b98a6; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdp-profile-dark .gvdp-profile-mark strong, .gvdp-profile-navy .gvdp-profile-mark strong{ color:#f0b429; border-color:rgba(240,180,41,.40); } .gvdp-profile-content{ min-width:0; max-width:1020px; } .gvdp-category{ margin-bottom:15px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gvdp-profile-dark .gvdp-category, .gvdp-profile-navy .gvdp-category{ color:#f0b429; } .gvdp-profile-heading h2, .gvdp-profile-content > h2{ max-width:950px; margin:0 0 24px; color:#061d3d; font-size:clamp(40px,5vw,63px); line-height:1.04; letter-spacing:-2.2px; } .gvdp-profile-heading h2 strong, .gvdp-profile-content > h2 strong{ color:#b97800; } .gvdp-profile-dark .gvdp-profile-heading h2, .gvdp-profile-dark .gvdp-profile-content > h2, .gvdp-profile-navy .gvdp-profile-heading h2, .gvdp-profile-navy .gvdp-profile-content > h2{ color:#ffffff; } .gvdp-profile-dark .gvdp-profile-heading h2 strong, .gvdp-profile-dark .gvdp-profile-content > h2 strong, .gvdp-profile-navy .gvdp-profile-heading h2 strong, .gvdp-profile-navy .gvdp-profile-content > h2 strong{ color:#f0b429; } .gvdp-profile-heading p, .gvdp-profile-content > p{ max-width:920px; margin:0 0 23px; color:#536274; font-size:16px; line-height:1.85; } .gvdp-profile-heading p strong, .gvdp-profile-content > p strong{ color:#092f62; } .gvdp-profile-dark .gvdp-profile-heading p, .gvdp-profile-dark .gvdp-profile-content > p, .gvdp-profile-navy .gvdp-profile-heading p, .gvdp-profile-navy .gvdp-profile-content > p{ color:#c6d2df; } .gvdp-profile-dark .gvdp-profile-heading p strong, .gvdp-profile-dark .gvdp-profile-content > p strong, .gvdp-profile-navy .gvdp-profile-heading p strong, .gvdp-profile-navy .gvdp-profile-content > p strong{ color:#ffffff; } .gvdp-dark-lead{ font-size:19px !important; } /* ========================================================= SNAPSHOT ========================================================= */ .gvdp-snapshot{ display:grid; grid-template-columns:repeat(4,1fr); margin:35px 0; border:1px solid rgba(9,47,98,.13); border-radius:10px; overflow:hidden; background:#ffffff; } .gvdp-snapshot > div{ min-height:100px; padding:20px; border-right:1px solid rgba(9,47,98,.10); } .gvdp-snapshot > div:last-child{ border-right:0; } .gvdp-snapshot span, .gvdp-snapshot-dark span{ display:block; margin-bottom:8px; color:#778493; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-snapshot strong{ display:block; color:#092f62; font-size:18px; line-height:1.35; } .gvdp-snapshot-dark{ border-color:rgba(255,255,255,.11); background:rgba(255,255,255,.035); } .gvdp-snapshot-dark > div{ border-color:rgba(255,255,255,.09); } .gvdp-snapshot-dark span{ color:#91a2b4; } .gvdp-snapshot-dark strong{ color:#ffffff; } /* ========================================================= METHOD STACK ========================================================= */ .gvdp-method-stack{ margin:38px 0; border-top:1px solid rgba(9,47,98,.12); } .gvdp-method{ display:grid; grid-template-columns:70px minmax(0,1fr); gap:20px; padding:26px 0; border-bottom:1px solid rgba(9,47,98,.12); } .gvdp-method-number{ display:flex; align-items:center; justify-content:center; width:49px; height:49px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvdp-method span{ display:block; margin-bottom:5px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-method h3{ margin:0 0 8px; color:#061d3d; font-size:24px; } .gvdp-method p{ max-width:800px; margin:0; color:#566577; font-size:15px; line-height:1.75; } .gvdp-method p strong{ color:#092f62; } /* ========================================================= RESULT ========================================================= */ .gvdp-result{ margin:35px 0; padding:25px; border-radius:11px; background: linear-gradient( 135deg, #04152d, #092f62 ); } .gvdp-result-label{ margin-bottom:20px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvdp-result-grid{ display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:1px; background:rgba(240,180,41,.14); } .gvdp-result-grid > div{ padding:19px; background:#061d3d; } .gvdp-result-grid span{ display:block; margin-bottom:8px; color:#94a7b9; font-size:15px; font-weight:800; } .gvdp-result-grid strong{ display:block; color:#ffffff; font-size:27px; } .gvdp-result-total{ background: linear-gradient( 135deg, #092f62, #061d3d ) !important; } .gvdp-result-total strong{ color:#f0b429; font-size:35px; } /* ========================================================= OUTCOME ========================================================= */ .gvdp-outcome{ padding:22px; border-left:3px solid #b97800; background:rgba(9,47,98,.045); } .gvdp-outcome span, .gvdp-bank-outcome span{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-outcome p, .gvdp-bank-outcome p{ margin:0; color:#4f6072; font-size:15px; line-height:1.75; } .gvdp-outcome p strong, .gvdp-bank-outcome p strong{ color:#092f62; } /* ========================================================= PROFILE 02 — RESEARCH PANEL ========================================================= */ .gvdp-research-panel{ margin:35px 0; padding:25px; border:1px solid rgba(240,180,41,.18); border-radius:11px; background:rgba(255,255,255,.035); } .gvdp-research-heading, .gvdp-tax-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.10); } .gvdp-research-heading span, .gvdp-tax-header span{ color:#9babbc; font-size:15px; font-weight:800; letter-spacing:1px; } .gvdp-research-heading strong, .gvdp-tax-header strong{ color:#f0b429; font-size:15px; letter-spacing:1px; } .gvdp-research-panel p{ color:#bdcbd8; font-size:15px; line-height:1.75; } .gvdp-research-panel p strong{ color:#ffffff; } .gvdp-comparable-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:22px; background:rgba(240,180,41,.12); } .gvdp-comparable-grid div{ padding:18px; background:#061d3d; } .gvdp-comparable-grid span{ display:block; margin-bottom:7px; color:#91a2b4; font-size:15px; } .gvdp-comparable-grid strong{ color:#ffffff; font-size:17px; } /* ========================================================= TAX COMPARISON ========================================================= */ .gvdp-tax-comparison{ margin:37px 0; padding:25px; border:1px solid rgba(240,180,41,.18); border-radius:11px; background:rgba(255,255,255,.025); } .gvdp-tax-columns{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:20px; background:rgba(240,180,41,.14); } .gvdp-tax-method{ padding:26px; background:#061d3d; } .gvdp-tax-method > span{ color:#91a3b6; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-tax-method h3{ margin:8px 0 20px; color:#ffffff; font-size:25px; } .gvdp-tax-line{ margin:11px 0; color:#bac8d5; font-size:15px; } .gvdp-tax-method > strong{ display:block; color:#ffffff; font-size:23px; } .gvdp-tax-method small{ display:block; margin-top:4px; color:#8fa1b3; font-size:15px; } .gvdp-tax-highlight{ background: linear-gradient( 145deg, #092f62, #061d3d ); } .gvdp-tax-highlight > span{ color:#f0b429; } .gvdp-tax-final{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(240,180,41,.18); color:#f0b429; font-size:31px; font-weight:900; } .gvdp-tax-method em{ display:block; margin-top:8px; color:#aebdcc; font-size:15px; font-style:normal; } .gvdp-saving{ display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:25px; padding:24px; border:1px solid rgba(240,180,41,.22); border-radius:10px; background: linear-gradient( 100deg, rgba(240,180,41,.08), rgba(9,47,98,.20) ); } .gvdp-saving span{ color:#a9bacb; font-size:15px; font-weight:800; } .gvdp-saving > strong{ color:#f0b429; font-size:31px; } .gvdp-saving p{ margin:0; color:#c1ceda; font-size:15px; line-height:1.65; } .gvdp-saving p strong{ color:#ffffff; } /* ========================================================= PROFILE 03 ========================================================= */ .gvdp-location-banner{ display:flex; align-items:center; gap:20px; margin:35px 0; padding:22px; border:1px solid rgba(9,47,98,.13); border-radius:11px; background:#ffffff; box-shadow:0 15px 35px rgba(6,29,61,.06); } .gvdp-location-pin{ display:flex; align-items:center; justify-content:center; width:65px; height:65px; flex:none; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvdp-location-banner span{ display:block; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-location-banner strong{ display:block; margin:4px 0; color:#061d3d; font-size:23px; } .gvdp-location-banner p{ margin:0; color:#657487; font-size:15px; } .gvdp-institutional-stack{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:38px 0; background:rgba(9,47,98,.13); } .gvdp-institutional-stack > div{ min-height:270px; padding:25px; background:#ffffff; } .gvdp-institutional-stack span{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:19px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvdp-institutional-stack h3{ margin:0 0 10px; color:#061d3d; font-size:23px; } .gvdp-institutional-stack p{ margin:0; color:#566577; font-size:15px; line-height:1.75; } .gvdp-institutional-stack p strong{ color:#092f62; } .gvdp-institutional-certificate{ display:grid; grid-template-columns:65px minmax(0,1fr); gap:20px; padding:24px; border-left:4px solid #b97800; background:#f1f5f9; } .gvdp-certificate-mark{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; border:1px solid rgba(185,120,0,.40); border-radius:50%; color:#b97800; font-size:18px; font-weight:900; } .gvdp-institutional-certificate span, .gvdp-trust-note span{ display:block; margin-bottom:5px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-institutional-certificate strong{ display:block; color:#061d3d; font-size:21px; } .gvdp-institutional-certificate p{ margin:6px 0 0; color:#59697b; font-size:15px; line-height:1.65; } .gvdp-trust-note{ margin-top:25px; padding:20px 22px; border:1px solid rgba(9,47,98,.10); background:#ffffff; } .gvdp-trust-note p{ margin:0; color:#566577; font-size:15px; line-height:1.7; } /* ========================================================= PROFILE 04 — LEASE JOURNEY ========================================================= */ .gvdp-lease-journey{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:38px 0; background:rgba(240,180,41,.13); } .gvdp-lease-step{ min-height:275px; padding:25px; background:#061d3d; } .gvdp-lease-step > span{ display:flex; align-items:center; justify-content:center; width:41px; height:41px; margin-bottom:22px; border:1px solid rgba(240,180,41,.38); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvdp-lease-step strong{ display:block; margin-bottom:10px; color:#ffffff; font-size:21px; } .gvdp-lease-step p{ margin:0; color:#b9c7d4; font-size:15px; line-height:1.75; } .gvdp-lease-step p strong{ display:inline; color:#ffffff; font-size:15px; } .gvdp-value-dashboard{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:35px 0; background:rgba(240,180,41,.14); } .gvdp-value-dashboard > div{ padding:24px; background: linear-gradient( 145deg, #092f62, #061d3d ); } .gvdp-value-dashboard span{ display:block; margin-bottom:8px; color:#9badbf; font-size:15px; font-weight:800; } .gvdp-value-dashboard strong{ display:block; color:#f0b429; font-size:31px; } .gvdp-value-dashboard small{ display:block; margin-top:5px; color:#aebdca; font-size:15px; line-height:1.5; } .gvdx-bank-outcome{ padding:22px; border-left:3px solid #f0b429; background:rgba(240,180,41,.055); } .gvdp-bank-outcome{ padding:22px; border-left:3px solid #f0b429; background:rgba(240,180,41,.055); } /* ========================================================= PROFILE 05 — SARFAESI ========================================================= */ .gvdp-sarfaesi-banner{ display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; margin:35px 0; padding:25px; border:1px solid rgba(9,47,98,.13); border-radius:10px; background:#ffffff; } .gvdp-sarfaesi-banner span{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-sarfaesi-banner strong{ color:#061d3d; font-size:21px; } .gvdp-sarfaesi-arrow{ display:flex; align-items:center; justify-content:center; color:#b97800; font-size:25px; font-weight:900; } .gvdp-marketability{ display:grid; grid-template-columns:1.4fr .6fr; gap:1px; margin:35px 0; background:rgba(9,47,98,.13); } .gvdp-marketability-main{ display:grid; grid-template-columns:105px minmax(0,1fr); gap:20px; padding:26px; background:#f0f4f8; } .gvdp-percent{ display:flex; align-items:center; justify-content:center; width:90px; height:90px; border-radius:50%; color:#ffffff; background:#092f62; font-size:27px; font-weight:900; } .gvdp-marketability-main span, .gvdp-comparables span{ display:block; margin-bottom:6px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-marketability-main h3{ margin:0 0 9px; color:#061d3d; font-size:23px; } .gvdp-marketability-main p{ margin:0; color:#566577; font-size:15px; line-height:1.7; } .gvdp-marketability-main p strong{ color:#092f62; } .gvdp-comparables{ padding:26px; background:#ffffff; } .gvdp-comparables strong{ display:block; margin-bottom:8px; color:#061d3d; font-size:27px; } .gvdp-comparables p{ margin:0; color:#566577; font-size:15px; line-height:1.65; } .gvdp-sarfaesi-values{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:35px 0; background:rgba(9,47,98,.13); } .gvdp-sarfaesi-values > div{ padding:23px; background:#ffffff; } .gvdp-sarfaesi-values span{ display:block; margin-bottom:7px; color:#788594; font-size:15px; font-weight:800; } .gvdp-sarfaesi-values strong{ color:#092f62; font-size:27px; } .gvdp-sarfaesi-values .gvdp-reserve{ background: linear-gradient( 135deg, #092f62, #061d3d ); } .gvdp-sarfaesi-values .gvdp-reserve span{ color:#a8b8c8; } .gvdp-sarfaesi-values .gvdp-reserve strong{ color:#f0b429; } .gvdp-auction-outcome{ display:grid; grid-template-columns:60px minmax(0,1fr); gap:18px; padding:23px; border-left:3px solid #b97800; background:#f1f5f8; } .gvdp-auction-icon{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:#ffffff; background:#092f62; font-size:20px; font-weight:900; } .gvdp-auction-outcome span{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvdp-auction-outcome p{ margin:0; color:#566577; font-size:15px; line-height:1.75; } .gvdp-auction-outcome p strong{ color:#092f62; } /* ========================================================= CROSS PROFILE SUMMARY ========================================================= */ .gvdp-summary{ padding:100px 0; background: linear-gradient( 180deg, #f8fafc, #edf2f7 ); } .gvdp-summary-header{ max-width:850px; margin-bottom:45px; } .gvdp-summary-kicker{ margin-bottom:12px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gvdp-summary-header h2{ margin:0 0 17px; color:#061d3d; font-size:clamp(38px,4.7vw,58px); line-height:1.06; letter-spacing:-1.7px; } .gvdp-summary-header h2 strong{ color:#b97800; } .gvdp-summary-header p{ margin:0; color:#58687a; font-size:17px; line-height:1.8; } .gvdp-summary-header p strong{ color:#092f62; } .gvdp-summary-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(9,47,98,.13); } .gvdp-summary-grid > div{ min-height:180px; padding:23px 18px; background:#ffffff; } .gvdp-summary-grid strong{ display:block; margin-bottom:25px; color:#b97800; font-size:24px; } .gvdp-summary-grid span{ display:block; color:#061d3d; font-size:18px; font-weight:800; line-height:1.4; } .gvdp-summary-grid small{ display:block; margin-top:9px; color:#667587; font-size:15px; line-height:1.45; } /* ========================================================= FINAL CTA ========================================================= */ .gvdp-final{ padding:82px 0; color:#ffffff; background: radial-gradient( circle at 85% 45%, rgba(240,180,41,.15), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvdp-final-glow{ position:absolute; right:-250px; top:-200px; width:550px; height:550px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gvdp-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:center; } .gvdp-final-copy > span{ display:block; margin-bottom:10px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gvdp-final-copy h2{ max-width:800px; margin:0 0 17px; color:#ffffff; font-size:clamp(39px,4.8vw,60px); line-height:1.05; letter-spacing:-1.8px; } .gvdp-final-copy h2 strong{ color:#f0b429; } .gvdp-final-copy p{ max-width:800px; margin:0; color:#c5d2df; font-size:16px; line-height:1.8; } .gvdp-final-copy p strong{ color:#ffffff; } .gvdp-final-actions{ display:flex; flex-direction:column; gap:12px; min-width:250px; } .gvdp-cta, .gvdp-phone{ display:flex; align-items:center; justify-content:center; gap:13px; min-height:64px; border-radius:8px; } .gvdp-cta{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 16px 35px rgba(0,0,0,.28); } .gvdp-cta:hover{ color:#04152d; transform:translateY(-2px); } .gvdp-cta span{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:rgba(4,21,45,.12); font-size:18px; } .gvdp-cta strong{ font-size:16px; } .gvdp-phone{ padding:8px 18px; border:1px solid rgba(240,180,41,.50); color:#ffffff; } .gvdp-phone:hover{ color:#ffffff; border-color:#f0b429; } .gvdp-phone > span{ color:#f0b429; font-size:19px; } .gvdp-phone strong{ display:block; font-size:16px; } .gvdp-phone small{ display:block; margin-top:3px; color:#b7c6d5; font-size:15px; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .gvdp-profile-index{ grid-template-columns:repeat(3,1fr); } .gvdp-profile-index a:nth-child(3){ border-right:0; } .gvdp-summary-grid{ grid-template-columns:repeat(3,1fr); } .gvdp-summary-grid > div{ border-bottom:1px solid rgba(9,47,98,.08); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:991px){ .gvdp-intro{ padding:80px 0 70px; } .gvdp-intro h1{ font-size:61px; } .gvdp-profile-layout{ grid-template-columns:85px minmax(0,1fr); gap:30px; } .gvdp-profile-mark strong{ width:70px; height:70px; font-size:25px; } .gvdp-snapshot{ grid-template-columns:repeat(2,1fr); } .gvdp-snapshot > div:nth-child(2){ border-right:0; } .gvdp-snapshot > div:nth-child(-n+2){ border-bottom:1px solid rgba(9,47,98,.10); } .gvdp-comparable-grid{ grid-template-columns:repeat(2,1fr); } .gvdp-institutional-stack{ grid-template-columns:1fr; } .gvdp-institutional-stack > div{ min-height:auto; } .gvdp-lease-journey{ grid-template-columns:1fr; } .gvdp-lease-step{ min-height:auto; } .gvdp-marketability{ grid-template-columns:1fr; } .gvdp-sarfaesi-values{ grid-template-columns:repeat(2,1fr); } .gvdp-final-inner{ grid-template-columns:1fr; gap:35px; } .gvdp-final-actions{ flex-direction:row; min-width:0; } .gvdp-cta, .gvdp-phone{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:767px){ .gvdp-intro{ padding:62px 0 55px; } .gvdp-intro h1{ font-size:42px; letter-spacing:-1.8px; } .gvdp-intro-lead{ font-size:16px; line-height:1.75; } .gvdp-profile-index{ grid-template-columns:repeat(2,1fr); } .gvdp-profile-index a{ min-height:85px; padding:15px; } .gvdp-profile-index a:first-child{ padding-left:15px; } .gvdp-profile-index a:nth-child(3){ border-right:1px solid rgba(255,255,255,.10); } .gvdp-profile-index a:nth-child(even){ border-right:0; } .gvdp-profile{ padding:70px 0; } .gvdp-profile-layout{ grid-template-columns:1fr; gap:25px; } .gvdp-profile-mark{ position:relative; top:auto; flex-direction:row; justify-content:flex-start; gap:12px; } .gvdp-profile-mark strong{ width:60px; height:60px; margin:0; font-size:21px; } .gvdp-profile-mark small{ margin-left:3px; } .gvdp-profile-heading h2, .gvdp-profile-content > h2{ font-size:35px; } .gvdp-profile-heading p, .gvdp-profile-content > p{ font-size:15px; line-height:1.75; } .gvdp-dark-lead{ font-size:16px !important; } .gvdp-snapshot{ grid-template-columns:1fr 1fr; } .gvdp-snapshot > div{ min-height:90px; padding:16px; } .gvdp-snapshot strong{ font-size:16px; } .gvdp-method{ grid-template-columns:52px minmax(0,1fr); gap:14px; } .gvdp-method-number{ width:43px; height:43px; } .gvdp-result{ padding:18px; } .gvdp-result-grid{ grid-template-columns:1fr; } .gvdp-result-grid > div{ border-bottom:1px solid rgba(240,180,41,.10); } .gvdp-result-total strong{ font-size:30px; } .gvdp-research-panel, .gvdp-tax-comparison{ padding:18px 15px; } .gvdp-research-heading, .gvdp-tax-header{ display:block; } .gvdp-research-heading strong, .gvdp-tax-header strong{ display:block; margin-top:7px; } .gvdp-comparable-grid{ grid-template-columns:1fr 1fr; } .gvdp-tax-columns{ grid-template-columns:1fr; } .gvdp-saving{ grid-template-columns:1fr; gap:12px; } .gvdp-location-banner{ align-items:flex-start; } .gvdp-location-banner strong{ font-size:20px; } .gvdp-institutional-certificate{ grid-template-columns:1fr; } .gvdx-bank-outcome{ padding:18px; } .gvdp-value-dashboard{ grid-template-columns:1fr; } .gvdp-sarfaesi-banner{ grid-template-columns:1fr; gap:18px; } .gvdp-sarfaesi-arrow{ justify-content:flex-start; transform:rotate(90deg); } .gvdp-marketability-main{ grid-template-columns:1fr; } .gvdp-sarfaesi-values{ grid-template-columns:1fr 1fr; } .gvdp-auction-outcome{ grid-template-columns:1fr; } .gvdp-summary{ padding:70px 0; } .gvdp-summary-header h2{ font-size:35px; } .gvdp-summary-header p{ font-size:15px; } .gvdp-summary-grid{ grid-template-columns:1fr 1fr; } .gvdp-summary-grid > div{ min-height:150px; } .gvdp-final{ padding:65px 0; } .gvdp-final-copy h2{ font-size:35px; } .gvdp-final-copy p{ font-size:15px; } .gvdp-final-actions{ flex-direction:column; } .gvdp-cta, .gvdp-phone{ width:100%; flex:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:480px){ .gvdp-intro h1{ font-size:35px; } .gvdp-intro-lead{ padding-left:15px; } .gvdp-profile-index{ grid-template-columns:1fr; } .gvdp-profile-index a{ min-height:65px; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.10); } .gvdp-profile-index a:last-child{ border-bottom:0; } .gvdp-profile-heading h2, .gvdp-profile-content > h2{ font-size:31px; } .gvdp-snapshot{ grid-template-columns:1fr; } .gvdp-snapshot > div{ border-right:0; border-bottom:1px solid rgba(9,47,98,.10); } .gvdp-snapshot > div:last-child{ border-bottom:0; } .gvdp-comparable-grid{ grid-template-columns:1fr; } .gvdp-sarfaesi-values{ grid-template-columns:1fr; } .gvdp-summary-grid{ grid-template-columns:1fr; } .gvdp-summary-grid > div{ min-height:auto; } .gvdp-final-copy h2{ font-size:31px; } } /* ========================================================= ENGAGING THE DELHI PRACTICE PREMIUM PROCESS DESIGN UNIQUE NAMESPACE: gvedp- ROYAL PALETTE: #092f62 #061d3d #04152d #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gvedp-intro, .gvedp-contact-strip, .gvedp-process, .gvedp-summary, .gvedp-final{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gvedp-intro *, .gvedp-contact-strip *, .gvedp-process *, .gvedp-summary *, .gvedp-final *{ box-sizing:border-box; } .gvedp-intro a, .gvedp-contact-strip a, .gvedp-process a, .gvedp-summary a, .gvedp-final a{ text-decoration:none; } /* ========================================================= INTRO ========================================================= */ .gvedp-intro{ padding:105px 0 85px; color:#ffffff; background: radial-gradient( circle at 88% 15%, rgba(240,180,41,.14), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gvedp-intro-lines{ position:absolute; inset:0; opacity:.5; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:70px 70px; } .gvedp-intro-glow{ position:absolute; width:550px; height:550px; right:-330px; bottom:-300px; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .gvedp-intro-inner{ position:relative; z-index:2; max-width:1120px; margin:auto; } .gvedp-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gvedp-eyebrow span{ width:44px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gvedp-eyebrow i{ font-style:normal; opacity:.55; } .gvedp-intro h1{ max-width:1050px; margin:0; color:#ffffff; font-size:clamp(52px,7vw,88px); font-weight:750; line-height:.98; letter-spacing:-4px; } .gvedp-intro h1 span{ display:block; color:#f0b429; } .gvedp-intro h1 small{ display:block; max-width:800px; margin-top:24px; color:#ffffff; font-size:clamp(24px,3vw,37px); font-weight:500; line-height:1.2; letter-spacing:-1px; } .gvedp-intro-lead{ max-width:880px; margin:38px 0 0; padding-left:24px; border-left:2px solid #b97800; color:#d5e0eb; font-size:18px; line-height:1.8; } .gvedp-intro-lead strong{ color:#ffffff; font-weight:800; } /* ========================================================= PROCESS NAV ========================================================= */ .gvedp-process-nav{ display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; max-width:850px; margin-top:53px; } .gvedp-process-nav-item{ display:flex; align-items:center; gap:12px; } .gvedp-process-nav-item span{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#aebdcc; font-size:15px; font-weight:900; } .gvedp-process-nav-item.active span{ border-color:#f0b429; color:#061d3d; background:#f0b429; } .gvedp-process-nav-item strong{ color:#ffffff; font-size:15px; } .gvedp-process-nav-line{ height:1px; margin:0 15px; background: linear-gradient( 90deg, rgba(240,180,41,.55), rgba(255,255,255,.12) ); } /* ========================================================= CONTACT STRIP ========================================================= */ .gvedp-contact-strip{ position:relative; z-index:5; margin-top:-1px; color:#ffffff; background:#092f62; border-top:1px solid rgba(240,180,41,.22); border-bottom:1px solid rgba(240,180,41,.22); } .gvedp-contact-strip-inner{ display:grid; grid-template-columns:1.3fr 1fr 1fr auto; align-items:stretch; } .gvedp-contact-intro{ display:flex; flex-direction:column; justify-content:center; padding:21px 24px 21px 0; } .gvedp-contact-intro span{ margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvedp-contact-intro strong{ color:#ffffff; font-size:17px; } .gvedp-contact-item{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-left:1px solid rgba(255,255,255,.10); } .gvedp-contact-icon{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; flex:none; border:1px solid rgba(240,180,41,.35); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gvedp-contact-item small{ display:block; margin-bottom:3px; color:#aebdcc; font-size:15px; font-weight:700; } .gvedp-contact-item strong{ display:block; color:#ffffff; font-size:15px; } .gvedp-contact-button{ display:flex; align-items:center; justify-content:center; gap:13px; min-width:190px; padding:15px 22px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); font-size:15px; font-weight:850; } .gvedp-contact-button:hover{ color:#04152d; } .gvedp-contact-button span{ font-size:19px; } /* ========================================================= PROCESS SECTION ========================================================= */ .gvedp-process{ padding:110px 0; background: linear-gradient( 180deg, #f8fafc 0%, #eef3f8 100% ); } .gvedp-process-bg{ position:absolute; top:0; right:-350px; width:700px; height:700px; border:1px solid rgba(9,47,98,.06); border-radius:50%; } .gvedp-section-heading{ position:relative; z-index:2; display:grid; grid-template-columns:80px minmax(0,1fr); gap:27px; max-width:1000px; margin-bottom:65px; } .gvedp-heading-number{ display:flex; align-items:center; justify-content:center; width:70px; height:70px; border:1px solid rgba(185,120,0,.40); border-radius:50%; color:#b97800; font-size:22px; font-weight:900; } .gvedp-heading-label{ margin:5px 0 10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvedp-section-heading h2{ margin:0 0 16px; color:#061d3d; font-size:clamp(39px,4.8vw,61px); line-height:1.04; letter-spacing:-2px; } .gvedp-section-heading h2 strong{ color:#b97800; } .gvedp-section-heading p{ max-width:820px; margin:0; color:#566678; font-size:17px; line-height:1.8; } /* ========================================================= STEP CARD ========================================================= */ .gvedp-step{ position:relative; z-index:2; display:grid; grid-template-columns:100px minmax(0,1fr); gap:40px; max-width:1100px; margin:0 auto; padding:42px; border:1px solid rgba(9,47,98,.12); border-radius:15px; background:#ffffff; box-shadow: 0 22px 60px rgba(6,29,61,.08); } .gvedp-step-number{ display:flex; flex-direction:column; align-items:center; } .gvedp-step-number span{ display:flex; align-items:center; justify-content:center; width:76px; height:76px; border:2px solid #b97800; border-radius:50%; color:#b97800; font-size:25px; font-weight:900; background:#ffffff; } .gvedp-step-number small{ margin-top:10px; color:#7d8b99; font-size:15px; font-weight:800; letter-spacing:1.3px; } .gvedp-step-content{ min-width:0; } .gvedp-step-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:25px; margin-bottom:25px; } .gvedp-step-kicker{ display:block; margin-bottom:8px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gvedp-step-top h3{ margin:0; color:#061d3d; font-size:clamp(31px,3.5vw,46px); line-height:1.08; letter-spacing:-1.3px; } .gvedp-step-top h3 strong{ color:#b97800; } .gvedp-step-tag{ flex:none; padding:9px 12px; border:1px solid rgba(185,120,0,.28); border-radius:5px; color:#092f62; background:#fbf8f1; font-size:15px; font-weight:850; letter-spacing:.8px; } .gvedp-step-content > p{ margin:0 0 20px; color:#536477; font-size:16px; line-height:1.85; } .gvedp-step-content > p strong{ color:#092f62; font-weight:800; } .gvedp-step-lead{ color:#3f5063 !important; font-size:18px !important; } /* ========================================================= PROPERTY BRIEF CARDS ========================================================= */ .gvedp-brief-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:30px 0; } .gvedp-brief-card{ display:flex; align-items:flex-start; gap:14px; padding:19px; border:1px solid rgba(9,47,98,.10); border-radius:9px; background:#f8fafc; } .gvedp-brief-card:last-child{ grid-column:1 / -1; } .gvedp-brief-icon{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; flex:none; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvedp-brief-card strong{ display:block; color:#061d3d; font-size:17px; } .gvedp-brief-card p{ margin:5px 0 0; color:#647386; font-size:15px; line-height:1.6; } /* ========================================================= INSIGHT ========================================================= */ .gvedp-insight{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; margin:27px 0; padding:20px; border-left:4px solid #b97800; border-radius:0 9px 9px 0; background: linear-gradient( 100deg, rgba(9,47,98,.07), rgba(185,120,0,.04) ); } .gvedp-insight span{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gvedp-insight p{ margin:0; color:#536477; font-size:15px; line-height:1.7; } .gvedp-insight p strong{ color:#092f62; } /* ========================================================= STEP CTA ========================================================= */ .gvedp-step-cta{ display:inline-flex; align-items:center; justify-content:center; gap:17px; min-height:56px; margin-top:15px; padding:13px 20px; border-radius:7px; color:#ffffff !important; background: linear-gradient( 135deg, #092f62, #061d3d ); box-shadow: 0 12px 24px rgba(6,29,61,.16); } .gvedp-step-cta:hover{ color:#ffffff !important; background: linear-gradient( 135deg, #b97800, #d99a16 ); } .gvedp-step-cta strong{ color:#ffffff !important; font-size:15px; } .gvedp-step-cta span{ color:#f0b429; font-size:19px; } /* ========================================================= STEP CONNECTOR ========================================================= */ .gvedp-step-connector{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; height:105px; } .gvedp-step-connector > span{ position:absolute; top:0; bottom:0; width:2px; background: linear-gradient( 180deg, #b97800, #f0b429 ); } .gvedp-step-connector div{ position:relative; z-index:2; display:flex; align-items:center; gap:13px; padding:10px 16px; border:1px solid rgba(185,120,0,.25); border-radius:5px; color:#7d6a42; background:#f5f7f9; font-size:15px; font-weight:800; letter-spacing:.8px; } .gvedp-step-connector strong{ color:#b97800; font-size:18px; } /* ========================================================= STEP 02 — SCOPE BOARD ========================================================= */ .gvedp-scope-board{ margin:31px 0 24px; border:1px solid rgba(9,47,98,.12); border-radius:10px; overflow:hidden; } .gvedp-scope-board-head{ display:flex; justify-content:space-between; gap:20px; padding:17px 20px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gvedp-scope-board-head span{ color:#aebdcc; font-size:15px; font-weight:700; letter-spacing:1px; } .gvedp-scope-board-head strong{ color:#f0b429; font-size:15px; letter-spacing:1px; } .gvedp-scope-row{ display:grid; grid-template-columns:55px minmax(0,1fr); gap:15px; padding:20px; border-bottom:1px solid rgba(9,47,98,.08); background:#ffffff; } .gvedp-scope-row:last-child{ border-bottom:0; } .gvedp-scope-index{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; border:1px solid rgba(185,120,0,.35); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .gvedp-scope-row strong{ display:block; color:#061d3d; font-size:18px; } .gvedp-scope-row p{ margin:5px 0 0; color:#5b6b7d; font-size:15px; line-height:1.7; } .gvedp-scope-row p strong{ display:inline; color:#092f62; font-size:15px; } /* ========================================================= METHODOLOGY PILLS ========================================================= */ .gvedp-method-pills{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:25px 0; } .gvedp-method-pills > div{ padding:21px; border:1px solid rgba(185,120,0,.22); border-radius:9px; background:#fbf8f1; } .gvedp-method-pills span{ display:block; color:#8a7650; font-size:15px; font-weight:800; letter-spacing:1px; } .gvedp-method-pills strong{ display:block; margin-top:7px; color:#092f62; font-size:24px; } .gvedp-method-pills small{ display:block; margin-top:4px; color:#697788; font-size:15px; } /* ========================================================= CLARITY BAR ========================================================= */ .gvedp-clarity{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-radius:7px; background:#061d3d; } .gvedp-clarity span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvedp-clarity strong{ color:#ffffff; font-size:16px; } /* ========================================================= STEP 03 — DELIVERY TIMELINE ========================================================= */ .gvedp-delivery-timeline{ position:relative; margin:34px 0 30px; } .gvedp-delivery-timeline:before{ content:""; position:absolute; top:15px; bottom:15px; left:20px; width:2px; background: linear-gradient( 180deg, #b97800, #f0b429, rgba(185,120,0,.15) ); } .gvedp-delivery-item{ position:relative; display:grid; grid-template-columns:42px minmax(0,1fr); gap:20px; margin-bottom:25px; } .gvedp-delivery-item:last-child{ margin-bottom:0; } .gvedp-delivery-marker{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:2px solid #b97800; border-radius:50%; color:#b97800; background:#ffffff; font-size:15px; font-weight:900; } .gvedp-delivery-item strong{ display:block; color:#061d3d; font-size:20px; } .gvedp-delivery-item p{ margin:5px 0 0; color:#5c6c7e; font-size:15px; line-height:1.7; } .gvedp-delivery-item p strong{ display:inline; color:#092f62; font-size:15px; } /* ========================================================= SUPPORT ========================================================= */ .gvedp-support{ margin-top:34px; padding:25px; border-radius:11px; color:#ffffff; background: linear-gradient( 135deg, #04152d, #092f62 ); } .gvedp-support-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:25px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12); } .gvedp-support-heading span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvedp-support-heading strong{ max-width:560px; color:#ffffff; font-size:17px; line-height:1.5; } .gvedp-support-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:20px; background:rgba(240,180,41,.14); } .gvedp-support-grid > div{ padding:19px; background:#061d3d; } .gvedp-support-grid span{ display:block; margin-bottom:9px; color:#f0b429; font-size:15px; font-weight:900; letter-spacing:1px; } .gvedp-support-grid strong{ display:block; color:#ffffff; font-size:16px; } .gvedp-support-grid p{ margin:5px 0 0; color:#aebdcd; font-size:15px; line-height:1.6; } /* ========================================================= SUMMARY ========================================================= */ .gvedp-summary{ padding:95px 0; background:#ffffff; } .gvedp-summary-header{ max-width:900px; margin:0 auto 48px; text-align:center; } .gvedp-summary-header > span{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gvedp-summary-header h2{ margin:12px 0 0; color:#061d3d; font-size:clamp(36px,4.5vw,55px); line-height:1.08; letter-spacing:-1.7px; } .gvedp-summary-header h2 strong{ color:#b97800; } .gvedp-summary-grid{ display:grid; grid-template-columns:1fr 60px 1fr 60px 1fr; align-items:center; max-width:1100px; margin:auto; } .gvedp-summary-card{ min-height:220px; padding:27px; border:1px solid rgba(9,47,98,.12); border-radius:11px; background:#f8fafc; box-shadow:0 15px 35px rgba(6,29,61,.05); } .gvedp-summary-card > span{ display:flex; align-items:center; justify-content:center; width:43px; height:43px; margin-bottom:25px; border-radius:50%; color:#ffffff; background:#092f62; font-size:15px; font-weight:900; } .gvedp-summary-card > strong{ display:block; color:#061d3d; font-size:25px; } .gvedp-summary-card p{ margin:8px 0 0; color:#607083; font-size:15px; line-height:1.7; } .gvedp-summary-arrow{ color:#b97800; text-align:center; font-size:29px; font-weight:900; } /* ========================================================= FINAL CTA ========================================================= */ .gvedp-final{ padding:90px 0 50px; color:#ffffff; background: radial-gradient( circle at 85% 35%, rgba(240,180,41,.14), transparent 30% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gvedp-final-pattern{ position:absolute; width:650px; height:650px; right:-350px; top:-260px; border:1px solid rgba(240,180,41,.11); border-radius:50%; } .gvedp-final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:center; gap:70px; } .gvedp-final-copy > span{ display:block; margin-bottom:10px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gvedp-final-copy h2{ max-width:800px; margin:0 0 18px; color:#ffffff; font-size:clamp(39px,5vw,61px); line-height:1.05; letter-spacing:-2px; } .gvedp-final-copy h2 strong{ color:#f0b429; } .gvedp-final-copy p{ max-width:800px; margin:0; color:#c7d4e1; font-size:16px; line-height:1.8; } .gvedp-final-copy p strong{ color:#ffffff; } /* ========================================================= FINAL ACTIONS ========================================================= */ .gvedp-final-actions{ display:flex; flex-direction:column; gap:11px; } .gvedp-final-button, .gvedp-final-phone, .gvedp-final-email{ display:flex; align-items:center; gap:13px; min-height:62px; padding:10px 17px; border-radius:7px; } .gvedp-final-button{ justify-content:center; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 30px rgba(0,0,0,.25); } .gvedp-final-button:hover{ color:#04152d; } .gvedp-final-button span{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(4,21,45,.12); font-size:17px; } .gvedp-final-button strong{ font-size:16px; } .gvedp-final-phone, .gvedp-final-email{ border:1px solid rgba(240,180,41,.34); color:#ffffff; } .gvedp-final-phone:hover, .gvedp-final-email:hover{ color:#ffffff; border-color:#f0b429; } .gvedp-final-phone > span, .gvedp-final-email > span{ color:#f0b429; font-size:19px; } .gvedp-final-phone strong, .gvedp-final-email strong{ display:block; color:#ffffff; font-size:15px; } .gvedp-final-phone small, .gvedp-final-email small{ display:block; margin-top:3px; color:#aebdcc; font-size:15px; } /* ========================================================= ADDRESS ========================================================= */ .gvedp-address{ position:relative; z-index:2; display:flex; align-items:center; gap:20px; margin-top:60px; padding-top:23px; border-top:1px solid rgba(255,255,255,.13); } .gvedp-address span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gvedp-address strong{ color:#d1dce7; font-size:15px; font-weight:600; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .gvedp-contact-strip-inner{ grid-template-columns:1fr 1fr; } .gvedp-contact-intro{ padding-left:0; } .gvedp-contact-button{ min-height:60px; } .gvedp-step{ grid-template-columns:80px minmax(0,1fr); gap:25px; } .gvedp-summary-grid{ grid-template-columns:1fr; gap:15px; } .gvedp-summary-arrow{ transform:rotate(90deg); } } /* ========================================================= TABLET / MOBILE ========================================================= */ @media (max-width:991px){ .gvedp-intro{ padding:80px 0 70px; } .gvedp-intro h1{ font-size:62px; } .gvedp-process{ padding:80px 0; } .gvedp-section-heading{ grid-template-columns:70px minmax(0,1fr); } .gvedp-step{ padding:30px; } .gvedp-step-top{ display:block; } .gvedp-step-tag{ display:inline-block; margin-top:17px; } .gvedp-support-grid{ grid-template-columns:1fr; } .gvedp-final-inner{ grid-template-columns:1fr; gap:40px; } .gvedp-final-actions{ max-width:500px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gvedp-intro{ padding:62px 0 55px; } .gvedp-intro h1{ font-size:43px; letter-spacing:-2px; } .gvedp-intro h1 small{ font-size:24px; } .gvedp-intro-lead{ padding-left:17px; font-size:16px; line-height:1.75; } .gvedp-process-nav{ grid-template-columns:1fr; gap:11px; } .gvedp-process-nav-line{ width:1px; height:22px; margin:0 0 0 23px; } .gvedp-contact-strip-inner{ grid-template-columns:1fr; } .gvedp-contact-intro{ padding:20px 0; } .gvedp-contact-item{ padding:17px 0; border-left:0; border-top:1px solid rgba(255,255,255,.10); } .gvedp-contact-button{ margin:10px 0 20px; min-height:57px; } .gvedp-section-heading{ grid-template-columns:1fr; gap:20px; margin-bottom:43px; } .gvedp-heading-number{ width:60px; height:60px; } .gvedp-section-heading h2{ font-size:37px; } .gvedp-step{ grid-template-columns:1fr; gap:23px; padding:23px 18px; border-radius:11px; } .gvedp-step-number{ align-items:flex-start; flex-direction:row; gap:12px; } .gvedp-step-number span{ width:58px; height:58px; font-size:20px; } .gvedp-step-number small{ align-self:center; margin:0; } .gvedp-step-top h3{ font-size:32px; } .gvedp-step-lead{ font-size:16px !important; } .gvedp-step-content > p{ font-size:15px; line-height:1.75; } .gvedp-brief-grid{ grid-template-columns:1fr; } .gvedp-brief-card:last-child{ grid-column:auto; } .gvedp-insight{ grid-template-columns:1fr; gap:8px; } .gvedp-step-connector{ height:90px; } .gvedp-step-connector div{ font-size:15px; padding:8px 11px; text-align:center; } .gvedp-scope-board-head{ display:block; } .gvedp-scope-board-head strong{ display:block; margin-top:5px; } .gvedp-scope-row{ grid-template-columns:45px minmax(0,1fr); padding:17px 14px; } .gvedp-method-pills{ grid-template-columns:1fr; } .gvedp-clarity{ display:block; } .gvedp-clarity strong{ display:block; margin-top:7px; } .gvedp-delivery-item{ grid-template-columns:38px minmax(0,1fr); gap:15px; } .gvedp-delivery-marker{ width:38px; height:38px; } .gvedp-delivery-timeline:before{ left:18px; } .gvedp-support{ padding:20px 15px; } .gvedp-support-heading{ display:block; } .gvedp-support-heading strong{ display:block; margin-top:9px; } .gvedp-summary{ padding:70px 0; } .gvedp-summary-header h2{ font-size:35px; } .gvedp-summary-card{ min-height:auto; } .gvedp-final{ padding:70px 0 40px; } .gvedp-final-copy h2{ font-size:37px; } .gvedp-final-copy p{ font-size:15px; } .gvedp-address{ display:block; } .gvedp-address strong{ display:block; margin-top:8px; line-height:1.6; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gvedp-intro h1{ font-size:36px; } .gvedp-intro h1 small{ font-size:22px; } .gvedp-step-top h3{ font-size:29px; } .gvedp-section-heading h2, .gvedp-summary-header h2, .gvedp-final-copy h2{ font-size:32px; } .gvedp-step-cta{ width:100%; } .gvedp-summary-card{ padding:23px; } } /* ========================================================= DELHI ENGAGEMENT PROCESS — SIX STAGES Unique Namespace: gavdp- ROYAL BRAND SYSTEM Navy: #092f62 Dark Navy: #061d3d Deep Navy: #04152d Gold: #b97800 Gold: #d99a16 Bright Gold: #f0b429 Minimum font size: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavdp-process-hero, .gavdp-overview, .gavdp-stage{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavdp-process-hero *, .gavdp-overview *, .gavdp-stage *{ box-sizing:border-box; } .gavdp-process-hero a, .gavdp-overview a, .gavdp-stage a{ text-decoration:none; } /* ========================================================= HERO ========================================================= */ .gavdp-process-hero{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 83% 20%, rgba(240,180,41,.13), transparent 31% ), linear-gradient( 135deg, #04152d 0%, #061d3d 53%, #092f62 100% ); } .gavdp-hero-orbit{ position:absolute; border:1px solid rgba(240,180,41,.10); border-radius:50%; pointer-events:none; } .gavdp-hero-orbit-one{ width:650px; height:650px; right:-340px; top:-220px; } .gavdp-hero-orbit-two{ width:430px; height:430px; right:-230px; top:-110px; border-color:rgba(240,180,41,.07); } .gavdp-hero-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:70px; align-items:center; } .gavdp-hero-content{ max-width:950px; } .gavdp-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:23px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.5px; line-height:1.5; } .gavdp-eyebrow span{ display:block; width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavdp-eyebrow i{ font-style:normal; opacity:.55; } .gavdp-process-hero h1{ max-width:950px; margin:0; color:#ffffff; font-size:clamp(48px,6vw,78px); font-weight:750; line-height:1.03; letter-spacing:-2.8px; } .gavdp-process-hero h1 strong{ display:block; color:#f0b429; } .gavdp-hero-lead{ max-width:850px; margin:29px 0 0; color:#d9e3ee; font-size:18px; line-height:1.8; } .gavdp-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO PRINCIPLES ========================================================= */ .gavdp-hero-principles{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:40px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gavdp-hero-principles div{ min-height:105px; display:flex; flex-direction:column; justify-content:center; padding:14px 17px; border-right:1px solid rgba(255,255,255,.10); } .gavdp-hero-principles div:first-child{ padding-left:0; } .gavdp-hero-principles div:last-child{ border-right:0; } .gavdp-hero-principles span{ color:#b97800; font-size:15px; font-weight:900; } .gavdp-hero-principles strong{ margin-top:4px; color:#ffffff; font-size:17px; } .gavdp-hero-principles small{ margin-top:3px; color:#afbdcc; font-size:15px; line-height:1.35; } /* ========================================================= HERO SIDE STAMP ========================================================= */ .gavdp-hero-side{ position:relative; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; } .gavdp-process-stamp{ position:relative; width:220px; height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(240,180,41,.55); border-radius:50%; background: radial-gradient( circle, rgba(240,180,41,.10), rgba(4,21,45,.10) 70% ); text-align:center; } .gavdp-process-stamp:before{ content:""; position:absolute; inset:13px; border:1px dashed rgba(240,180,41,.27); border-radius:50%; } .gavdp-process-stamp span{ position:relative; color:#f0b429; font-size:46px; font-weight:900; line-height:1; } .gavdp-process-stamp strong{ position:relative; margin-top:3px; color:#ffffff; font-size:17px; letter-spacing:2px; } .gavdp-process-stamp small{ position:relative; margin-top:9px; color:#b9c7d6; font-size:15px; line-height:1.4; } .gavdp-hero-side-copy{ max-width:270px; margin-top:28px; padding-top:19px; border-top:1px solid rgba(240,180,41,.25); text-align:center; } .gavdp-hero-side-copy span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.2px; } .gavdp-hero-side-copy strong{ display:block; color:#ffffff; font-size:17px; line-height:1.4; } .gavdp-hero-side-copy p{ margin:7px 0 0; color:#aebdcd; font-size:15px; line-height:1.55; } /* ========================================================= OVERVIEW BAR ========================================================= */ .gavdp-overview{ padding:25px 0; border-bottom:1px solid rgba(240,180,41,.18); background:#04152d; } .gavdp-overview-inner{ display:grid; grid-template-columns:210px 1fr 150px; align-items:center; gap:30px; } .gavdp-overview-label span{ display:block; margin-bottom:3px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.3px; } .gavdp-overview-label strong{ color:#ffffff; font-size:17px; } .gavdp-overview-line{ position:relative; height:2px; display:flex; justify-content:space-between; background: linear-gradient( 90deg, #b97800, rgba(185,120,0,.22) ); } .gavdp-overview-line span{ width:10px; height:10px; margin-top:-4px; border:2px solid #f0b429; border-radius:50%; background:#04152d; } .gavdp-overview-end{ text-align:right; } .gavdp-overview-end span, .gavdp-overview-end b{ display:block; } .gavdp-overview-end span{ color:#8796a8; font-size:15px; } .gavdp-overview-end b{ color:#f0b429; font-size:15px; letter-spacing:1px; } /* ========================================================= COMMON STAGE ========================================================= */ .gavdp-stage{ padding:100px 0; } .gavdp-stage-dark{ color:#ffffff; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gavdp-stage-light{ color:#061d3d; background: linear-gradient( 180deg, #f8fafc, #eef3f8 ); } .gavdp-stage-navy{ color:#ffffff; background:#04152d; } .gavdp-stage-research{ color:#ffffff; background: linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .gavdp-stage-final{ color:#ffffff; background: radial-gradient( circle at 90% 30%, rgba(240,180,41,.13), transparent 30% ), linear-gradient( 135deg, #04152d, #092f62 ); } .gavdp-stage-grid{ display:grid; grid-template-columns:100px minmax(0,1fr); gap:45px; align-items:start; } /* ========================================================= STAGE MARKER ========================================================= */ .gavdp-stage-marker{ position:relative; min-height:150px; display:flex; flex-direction:column; align-items:center; } .gavdp-stage-marker:after{ content:""; position:absolute; top:72px; bottom:-100px; width:1px; background: linear-gradient( 180deg, #b97800, rgba(185,120,0,.04) ); } .gavdp-stage-final .gavdp-stage-marker:after{ display:none; } .gavdp-stage-marker span{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:76px; height:76px; border:1px solid #b97800; border-radius:50%; color:#f0b429; background:rgba(4,21,45,.30); font-size:24px; font-weight:900; box-shadow: 0 0 0 9px rgba(185,120,0,.06); } .gavdp-stage-light .gavdp-stage-marker span{ color:#b97800; background:#f8fafc; } .gavdp-stage-marker small{ position:relative; z-index:2; margin-top:15px; color:#a9b8c8; font-size:15px; font-weight:800; letter-spacing:1.1px; } .gavdp-stage-light .gavdp-stage-marker small{ color:#7d8a99; } /* ========================================================= STAGE CONTENT ========================================================= */ .gavdp-stage-content{ max-width:1050px; } .gavdp-stage-kicker{ display:flex; align-items:center; gap:11px; margin-bottom:15px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.5px; } .gavdp-stage-kicker:before{ content:""; width:31px; height:2px; background:#b97800; } .gavdp-stage-content h2{ margin:0 0 21px; color:#ffffff; font-size:clamp(35px,4vw,55px); line-height:1.08; letter-spacing:-1.5px; } .gavdp-stage-light .gavdp-stage-content h2{ color:#061d3d; } .gavdp-stage-content h2 strong{ color:#f0b429; } .gavdp-stage-light .gavdp-stage-content h2 strong{ color:#b97800; } .gavdp-stage-content p{ margin:0 0 20px; color:#d3deea; font-size:16px; line-height:1.82; } .gavdp-stage-light .gavdp-stage-content p{ color:#536274; } .gavdp-stage-content p strong{ color:#ffffff; font-weight:750; } .gavdp-stage-light .gavdp-stage-content p strong{ color:#092f62; } .gavdp-stage-lead{ max-width:900px; margin-bottom:30px !important; font-size:18px !important; } /* ========================================================= STAGE 01 DETAIL GRID ========================================================= */ .gavdp-stage-detail-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:32px; border:1px solid rgba(240,180,41,.18); background:rgba(240,180,41,.14); } .gavdp-stage-detail-grid > div{ min-height:185px; padding:24px; background:rgba(4,21,45,.50); } .gavdp-stage-detail-grid span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.1px; } .gavdp-stage-detail-grid strong{ display:block; margin-bottom:8px; color:#ffffff; font-size:19px; line-height:1.4; } .gavdp-stage-detail-grid p{ margin:0; color:#b9c8d8; font-size:15px; line-height:1.6; } .gavdp-location-strip{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; padding:18px 20px; border-left:3px solid #f0b429; background:rgba(255,255,255,.045); } .gavdp-location-strip span{ color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .gavdp-location-strip strong{ color:#ffffff; font-size:16px; } /* ========================================================= STAGE 02 DOCUMENT PANEL ========================================================= */ .gavdp-document-panel{ margin-top:32px; border:1px solid rgba(9,47,98,.15); background:#ffffff; box-shadow: 0 15px 38px rgba(6,29,61,.07); } .gavdp-document-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px 23px; border-bottom:1px solid rgba(9,47,98,.12); background:#f4f7fa; } .gavdp-document-head span, .gavdp-document-head b{ color:#092f62; font-size:15px; font-weight:800; letter-spacing:1px; } .gavdp-document-head b{ color:#b97800; } .gavdp-document-items{ display:grid; grid-template-columns:repeat(2,1fr); } .gavdp-document-items div{ display:grid; grid-template-columns:38px 1fr; gap:11px; align-items:start; min-height:100px; padding:19px 22px; border-right:1px solid rgba(9,47,98,.10); border-bottom:1px solid rgba(9,47,98,.10); } .gavdp-document-items div:nth-child(2n){ border-right:0; } .gavdp-document-items b{ color:#b97800; font-size:15px; } .gavdp-document-items span{ color:#59697b; font-size:15px; line-height:1.55; } .gavdp-document-items strong{ color:#092f62; } .gavdp-document-signature{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px 23px; background: linear-gradient( 90deg, #04152d, #061d3d ); } .gavdp-document-signature span{ color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .gavdp-document-signature strong{ color:#ffffff; font-size:18px; } /* ========================================================= STAGE 03 INSPECTION ========================================================= */ .gavdp-inspection-layout{ display:grid; grid-template-columns:300px 1fr; gap:24px; margin-top:32px; } .gavdp-condition-card{ padding:27px; border:1px solid rgba(240,180,41,.23); background: linear-gradient( 145deg, rgba(240,180,41,.10), rgba(255,255,255,.025) ); } .gavdp-condition-card > span{ display:block; margin-bottom:20px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.1px; } .gavdp-condition-list{ display:grid; gap:9px; } .gavdp-condition-list b{ display:block; padding:12px 14px; border-left:2px solid #b97800; color:#ffffff; background:rgba(255,255,255,.045); font-size:15px; } .gavdp-inspection-items{ display:grid; gap:1px; background:rgba(240,180,41,.13); } .gavdp-inspection-items > div{ display:grid; grid-template-columns:45px 1fr; gap:5px 12px; padding:20px; background:rgba(255,255,255,.035); } .gavdp-inspection-items span{ grid-row:span 2; color:#b97800; font-size:15px; font-weight:900; } .gavdp-inspection-items strong{ color:#ffffff; font-size:17px; } .gavdp-inspection-items p{ margin:0; color:#b9c8d7; font-size:15px; line-height:1.55; } /* ========================================================= STAGE 04 RESEARCH ========================================================= */ .gavdp-research-window{ margin-top:32px; border:1px solid rgba(240,180,41,.28); background:rgba(4,21,45,.45); } .gavdp-research-header{ display:flex; justify-content:space-between; gap:20px; padding:19px 23px; border-bottom:1px solid rgba(240,180,41,.15); } .gavdp-research-header span{ color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.1px; } .gavdp-research-header strong{ color:#b8c7d6; font-size:15px; } .gavdp-research-columns{ display:grid; grid-template-columns:1fr 1px 1fr; } .gavdp-research-columns > div:not(.gavdp-research-divider){ padding:29px; } .gavdp-research-divider{ background:rgba(240,180,41,.18); } .gavdp-research-columns span{ display:block; margin-bottom:9px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .gavdp-research-columns strong{ display:block; margin-bottom:9px; color:#ffffff; font-size:19px; } .gavdp-research-columns p{ margin:0; color:#bdcad8; font-size:15px; line-height:1.7; } .gavdp-adjustment-bar{ display:flex; align-items:center; gap:20px; padding:18px 22px; border-top:1px solid rgba(240,180,41,.15); background:rgba(240,180,41,.06); } .gavdp-adjustment-bar span{ color:#f0b429; font-size:15px; font-weight:900; letter-spacing:1px; } .gavdp-adjustment-bar strong{ color:#ffffff; font-size:15px; } .gavdp-adjustment-bar em{ color:#f0b429; font-style:normal; } /* ========================================================= STAGE 05 REVIEW ========================================================= */ .gavdp-review-board{ margin-top:32px; border:1px solid rgba(9,47,98,.14); background:#ffffff; box-shadow: 0 15px 40px rgba(6,29,61,.07); } .gavdp-review-title{ display:flex; align-items:center; justify-content:space-between; padding:19px 23px; border-bottom:1px solid rgba(9,47,98,.10); background:#f4f7fa; } .gavdp-review-title span{ color:#b97800; font-size:15px; font-weight:900; letter-spacing:1px; } .gavdp-review-title strong{ color:#092f62; font-size:15px; } .gavdp-review-grid{ display:grid; grid-template-columns:repeat(5,1fr); } .gavdp-review-grid > div{ min-height:210px; padding:22px 18px; border-right:1px solid rgba(9,47,98,.10); } .gavdp-review-grid > div:last-child{ border-right:0; } .gavdp-review-grid span{ display:block; margin-bottom:25px; color:#b97800; font-size:15px; font-weight:900; } .gavdp-review-grid strong{ display:block; margin-bottom:8px; color:#061d3d; font-size:17px; line-height:1.35; } .gavdp-review-grid p{ margin:0; color:#617082; font-size:15px; line-height:1.6; } .gavdp-review-grid p strong{ display:inline; color:#092f62; font-size:15px; } .gavdp-review-sign{ display:flex; align-items:center; gap:17px; margin-top:20px; padding:18px 21px; border-left:3px solid #b97800; background:#f2f5f8; } .gavdp-review-sign span{ color:#b97800; font-size:15px; font-weight:900; letter-spacing:1px; } .gavdp-review-sign strong{ color:#061d3d; font-size:18px; } .gavdp-review-sign small{ color:#6c7a8a; font-size:15px; } /* ========================================================= STAGE 06 CERTIFICATE ========================================================= */ .gavdp-final-glow{ position:absolute; width:700px; height:700px; right:-400px; top:-180px; border:1px solid rgba(240,180,41,.09); border-radius:50%; } .gavdp-certificate-layout{ display:grid; grid-template-columns:1fr 1fr; gap:25px; margin-top:32px; } /* Certificate */ .gavdp-certificate-card{ border:1px solid rgba(240,180,41,.32); background: linear-gradient( 145deg, rgba(255,255,255,.06), rgba(255,255,255,.025) ); } .gavdp-certificate-top{ display:flex; justify-content:space-between; padding:17px 21px; border-bottom:1px solid rgba(240,180,41,.15); } .gavdp-certificate-top span, .gavdp-certificate-top b{ color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .gavdp-certificate-top b{ color:#94a5b8; } .gavdp-certificate-body{ display:flex; align-items:center; gap:20px; min-height:190px; padding:25px; } .gavdp-certificate-seal{ display:flex; align-items:center; justify-content:center; width:105px; height:105px; flex:none; border:1px solid #b97800; border-radius:50%; color:#f0b429; font-size:22px; font-weight:900; box-shadow: inset 0 0 0 8px rgba(185,120,0,.06); } .gavdp-certificate-body strong{ display:block; margin-bottom:8px; color:#ffffff; font-size:20px; } .gavdp-certificate-body p{ margin:0; color:#bdcad8; font-size:15px; line-height:1.65; } .gavdp-certificate-footer{ padding:16px 21px; border-top:1px solid rgba(240,180,41,.13); } .gavdp-certificate-footer span{ display:block; color:#f0b429; font-size:15px; font-weight:900; letter-spacing:1px; } .gavdp-certificate-footer small{ display:block; margin-top:3px; color:#9eafc0; font-size:15px; } /* ========================================================= SUPPORT ========================================================= */ .gavdp-support{ padding:26px; border:1px solid rgba(240,180,41,.22); background:rgba(255,255,255,.035); } .gavdp-support > span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.1px; } .gavdp-support h3{ margin:0 0 21px; color:#ffffff; font-size:24px; line-height:1.35; } .gavdp-support h3 strong{ color:#f0b429; } .gavdp-support-list{ display:grid; gap:1px; background:rgba(240,180,41,.13); } .gavdp-support-list div{ display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; padding:14px; background:rgba(4,21,45,.40); } .gavdp-support-list b{ color:#b97800; font-size:15px; } .gavdp-support-list span{ color:#c5d1de; font-size:15px; line-height:1.45; } .gavdp-support-list span strong{ color:#ffffff; } /* ========================================================= FINAL ACTION ========================================================= */ .gavdp-final-action{ display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:45px; padding:30px 32px; border:1px solid rgba(240,180,41,.25); border-radius:12px; background: linear-gradient( 120deg, rgba(4,21,45,.80), rgba(9,47,98,.65) ); } .gavdp-final-action > div:first-child > span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:900; letter-spacing:1.2px; } .gavdp-final-action h3{ margin:0; color:#ffffff; font-size:27px; line-height:1.3; } .gavdp-final-action h3 strong{ color:#f0b429; } .gavdp-final-buttons{ display:flex; align-items:center; gap:11px; flex:none; } .gavdp-cta-primary, .gavdp-cta-phone{ display:flex; align-items:center; justify-content:center; gap:11px; min-height:56px; border-radius:8px; padding:0 21px; font-size:16px; font-weight:800; } .gavdp-cta-primary{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 26px rgba(0,0,0,.25); } .gavdp-cta-primary:hover{ color:#04152d; } .gavdp-cta-primary span{ font-size:20px; } .gavdp-cta-phone{ border:1px solid rgba(240,180,41,.52); color:#ffffff; background:rgba(255,255,255,.035); white-space:nowrap; } .gavdp-cta-phone:hover{ color:#ffffff; border-color:#f0b429; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .gavdp-hero-layout{ grid-template-columns:1fr 240px; gap:40px; } .gavdp-process-hero h1{ font-size:61px; } .gavdp-review-grid{ grid-template-columns:repeat(3,1fr); } .gavdp-review-grid > div:nth-child(3){ border-right:0; } .gavdp-review-grid > div:nth-child(-n+3){ border-bottom:1px solid rgba(9,47,98,.10); } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavdp-process-hero{ padding:80px 0 70px; } .gavdp-hero-layout{ grid-template-columns:1fr; } .gavdp-hero-side{ min-height:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:35px; } .gavdp-hero-side-copy{ margin-top:0; text-align:left; } .gavdp-stage{ padding:80px 0; } .gavdp-stage-grid{ grid-template-columns:80px minmax(0,1fr); gap:30px; } .gavdp-inspection-layout{ grid-template-columns:1fr; } .gavdp-certificate-layout{ grid-template-columns:1fr; } .gavdp-final-action{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavdp-process-hero{ padding:62px 0 55px; } .gavdp-process-hero h1{ font-size:42px; letter-spacing:-1.5px; } .gavdp-hero-lead{ font-size:16px; line-height:1.75; } .gavdp-hero-principles{ grid-template-columns:repeat(2,1fr); } .gavdp-hero-principles div, .gavdp-hero-principles div:first-child{ padding:15px 12px; border-bottom:1px solid rgba(255,255,255,.10); } .gavdp-hero-principles div:nth-child(2n){ border-right:0; } .gavdp-hero-side{ flex-direction:column; align-items:flex-start; gap:25px; } .gavdp-hero-side-copy{ max-width:100%; } .gavdp-overview{ display:none; } .gavdp-stage{ padding:65px 0; } .gavdp-stage-grid{ grid-template-columns:1fr; gap:30px; } .gavdp-stage-marker{ min-height:0; flex-direction:row; justify-content:flex-start; gap:15px; } .gavdp-stage-marker:after{ display:none; } .gavdp-stage-marker small{ margin-top:0; } .gavdp-stage-content h2{ font-size:36px; } .gavdp-stage-lead{ font-size:16px !important; } .gavdp-stage-content p{ font-size:15px; line-height:1.75; } .gavdp-stage-detail-grid{ grid-template-columns:1fr; } .gavdp-stage-detail-grid > div{ min-height:0; } .gavdp-location-strip{ display:block; } .gavdp-location-strip strong{ display:block; margin-top:7px; } .gavdp-document-items{ grid-template-columns:1fr; } .gavdp-document-items div{ border-right:0; } .gavdp-document-signature{ display:block; } .gavdp-document-signature strong{ display:block; margin-top:5px; } .gavdp-research-columns{ grid-template-columns:1fr; } .gavdp-research-divider{ width:100%; height:1px; } .gavdp-adjustment-bar{ display:block; } .gavdp-adjustment-bar strong{ display:block; margin-top:7px; } .gavdp-review-grid{ grid-template-columns:1fr; } .gavdp-review-grid > div{ min-height:0; border-right:0; border-bottom:1px solid rgba(9,47,98,.10); } .gavdp-review-grid > div:last-child{ border-bottom:0; } .gavdp-review-sign{ display:block; } .gavdp-review-sign strong, .gavdp-review-sign small{ display:block; margin-top:5px; } .gavdp-certificate-body{ align-items:flex-start; flex-direction:column; } .gavdp-final-action{ padding:25px 20px; } .gavdp-final-action h3{ font-size:23px; } .gavdp-final-buttons{ width:100%; flex-direction:column; align-items:stretch; } .gavdp-cta-primary, .gavdp-cta-phone{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavdp-process-hero h1{ font-size:36px; } .gavdp-process-stamp{ width:190px; height:190px; } .gavdp-process-stamp span{ font-size:40px; } .gavdp-stage-content h2{ font-size:32px; } .gavdp-stage-detail-grid > div{ padding:20px; } .gavdp-document-panel, .gavdp-review-board, .gavdp-research-window{ overflow:hidden; } .gavdp-certificate-body{ padding:20px; } .gavdp-certificate-seal{ width:90px; height:90px; } .gavdp-support{ padding:21px; } } /* ========================================================= DELHI VALUATION INSIGHTS GOVERNMENT APPROVED VALUERS DELHI NCR UNIQUE NAMESPACE: gavdi- BRAND: Deep Navy #04152d Navy #061d3d Royal Navy #092f62 Gold #b97800 Gold #d99a16 Gold #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavdi-hero, .gavdi-editorial, .gavdi-articles, .gavdi-themes, .gavdi-final-cta{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavdi-hero *, .gavdi-editorial *, .gavdi-articles *, .gavdi-themes *, .gavdi-final-cta *{ box-sizing:border-box; } .gavdi-hero a, .gavdi-editorial a, .gavdi-articles a, .gavdi-themes a, .gavdi-final-cta a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .gavdi-hero{ padding:110px 0 95px; color:#ffffff; background: radial-gradient( circle at 82% 20%, rgba(240,180,41,.14), transparent 31% ), linear-gradient( 135deg, #04152d 0%, #061d3d 48%, #092f62 100% ); } .gavdi-hero-grid{ position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, transparent 0, transparent 8%, rgba(240,180,41,.05) 8.05%, transparent 8.1%, transparent 92%, rgba(240,180,41,.05) 92.05%, transparent 92.1% ); } .gavdi-hero-grid:before{ content:""; position:absolute; width:650px; height:650px; right:-350px; top:-260px; border:1px solid rgba(240,180,41,.14); border-radius:50%; } .gavdi-hero-grid:after{ content:""; position:absolute; width:430px; height:430px; right:-240px; top:-150px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .gavdi-hero-inner{ position:relative; z-index:2; max-width:1120px; margin:auto; text-align:center; } .gavdi-hero-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:26px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1.7px; line-height:1.5; } .gavdi-hero-kicker span{ width:42px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavdi-hero h1{ max-width:1050px; margin:0 auto; color:#ffffff; font-size:clamp(48px,6.5vw,82px); font-weight:750; line-height:1.02; letter-spacing:-3px; } .gavdi-hero h1 strong{ display:block; margin-top:10px; color:#f0b429; font-weight:750; } .gavdi-hero-intro{ max-width:880px; margin:31px auto 0; color:#dbe5ef; font-size:18px; line-height:1.8; } .gavdi-hero-intro strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO META ========================================================= */ .gavdi-hero-meta{ display:grid; grid-template-columns:repeat(3,1fr); max-width:720px; margin:48px auto 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .gavdi-hero-meta div{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:90px; padding:15px; border-right:1px solid rgba(255,255,255,.12); } .gavdi-hero-meta div:last-child{ border-right:0; } .gavdi-hero-meta strong{ color:#f0b429; font-size:25px; font-weight:900; line-height:1; } .gavdi-hero-meta span{ color:#d2deea; font-size:15px; line-height:1.4; text-align:left; } /* ========================================================= SECTION LABEL ========================================================= */ .gavdi-section-label{ display:inline-flex; align-items:center; gap:11px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.6px; line-height:1.5; } .gavdi-section-label:before{ content:""; width:34px; height:2px; background:#b97800; } /* ========================================================= SECTION 02 — EDITORIAL ========================================================= */ .gavdi-editorial{ padding:75px 0 60px; background:#ffffff; } .gavdi-editorial-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; } .gavdi-editorial-heading h2{ margin:17px 0 0; color:#061d3d; font-size:clamp(34px,4vw,52px); line-height:1.12; letter-spacing:-1.2px; } .gavdi-editorial-heading h2 strong{ color:#b97800; } .gavdi-editorial-copy{ padding-left:30px; border-left:2px solid rgba(185,120,0,.35); } .gavdi-editorial-copy p{ margin:0 0 18px; color:#526276; font-size:16px; line-height:1.85; } .gavdi-editorial-copy p:last-child{ margin-bottom:0; } .gavdi-editorial-copy strong{ color:#092f62; font-weight:750; } .gavdi-editorial-line{ width:100%; height:1px; margin-top:55px; background: linear-gradient( 90deg, transparent, rgba(9,47,98,.16), transparent ); } /* ========================================================= SECTION 03 — ARTICLES ========================================================= */ .gavdi-articles{ padding:85px 0 100px; background: linear-gradient( 180deg, #f8fafc 0%, #eef3f8 100% ); } .gavdi-articles-header{ display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:end; margin-bottom:48px; } .gavdi-articles-header h2{ margin:15px 0 0; color:#061d3d; font-size:clamp(39px,4.5vw,60px); line-height:1; letter-spacing:-1.8px; } .gavdi-articles-header h2 strong{ color:#b97800; } .gavdi-articles-header > p{ margin:0; color:#526276; font-size:16px; line-height:1.8; } .gavdi-articles-header > p strong{ color:#092f62; } /* ========================================================= ARTICLE LIST ========================================================= */ .gavdi-article-list{ border-top:1px solid rgba(9,47,98,.16); } .gavdi-article{ display:grid; grid-template-columns:72px minmax(0,1fr) 150px; gap:27px; align-items:center; min-height:205px; padding:30px 0; border-bottom:1px solid rgba(9,47,98,.14); transition: padding .25s ease, background .25s ease; } .gavdi-article:hover{ padding-left:20px; padding-right:20px; background: linear-gradient( 90deg, rgba(185,120,0,.055), transparent 75% ); } .gavdi-article-number{ align-self:start; padding-top:4px; color:#b97800; font-size:25px; font-weight:900; letter-spacing:.5px; } .gavdi-article-content > span{ display:block; margin-bottom:8px; color:#7c8998; font-size:15px; font-weight:850; letter-spacing:1.15px; line-height:1.4; } .gavdi-article-content h3{ max-width:950px; margin:0 0 10px; color:#061d3d; font-size:25px; line-height:1.3; letter-spacing:-.3px; } .gavdi-article-content h3 strong{ color:#b97800; } .gavdi-article-content p{ max-width:870px; margin:0; color:#586779; font-size:15px; line-height:1.7; } .gavdi-article-content p strong{ color:#092f62; font-weight:750; } /* ========================================================= ARTICLE BUTTON ========================================================= */ .gavdi-article-button{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:0 17px; border:1px solid rgba(185,120,0,.42); border-radius:7px; color:#092f62; background:#ffffff; font-size:15px; font-weight:800; white-space:nowrap; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; } .gavdi-article-button span{ color:#b97800; font-size:19px; } .gavdi-article-button:hover{ color:#ffffff; background:#092f62; border-color:#092f62; transform:translateY(-2px); } .gavdi-article-button:hover span{ color:#f0b429; } /* ========================================================= SECTION 04 — RESEARCH THEMES ========================================================= */ .gavdi-themes{ padding:90px 0; color:#ffffff; background: linear-gradient( 135deg, #04152d 0%, #061d3d 58%, #092f62 100% ); } .gavdi-themes-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:75px; align-items:center; } .gavdi-themes-heading h2{ margin:17px 0 0; color:#ffffff; font-size:clamp(35px,4vw,53px); line-height:1.1; letter-spacing:-1.3px; } .gavdi-themes-heading h2 strong{ color:#f0b429; } .gavdi-theme-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.13); border-left:1px solid rgba(255,255,255,.13); } .gavdi-theme{ min-height:180px; padding:24px; border-right:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gavdi-theme > span{ display:block; margin-bottom:23px; color:#b97800; font-size:15px; font-weight:900; } .gavdi-theme > strong{ display:block; margin-bottom:9px; color:#ffffff; font-size:20px; line-height:1.35; } .gavdi-theme p{ margin:0; color:#cbd7e3; font-size:15px; line-height:1.65; } .gavdi-theme p strong{ color:#f0b429; } /* ========================================================= SECTION 05 — FINAL CTA ========================================================= */ .gavdi-final-cta{ padding:65px 0; background:#ffffff; } .gavdi-final-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:36px 40px; border-radius:13px; background: linear-gradient( 120deg, #04152d, #061d3d 55%, #092f62 ); box-shadow: 0 20px 45px rgba(6,29,61,.16); } .gavdi-final-copy > span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gavdi-final-copy h2{ max-width:760px; margin:0 0 11px; color:#ffffff; font-size:31px; line-height:1.3; } .gavdi-final-copy h2 strong{ color:#f0b429; } .gavdi-final-copy p{ max-width:730px; margin:0; color:#d2dce7; font-size:15px; line-height:1.7; } .gavdi-final-copy p strong{ color:#ffffff; } /* ========================================================= FINAL ACTIONS ========================================================= */ .gavdi-final-actions{ display:flex; flex-direction:column; gap:11px; min-width:245px; flex:none; } .gavdi-final-button, .gavdi-final-phone{ display:flex; align-items:center; gap:12px; min-height:62px; padding:10px 17px; border-radius:8px; } .gavdi-final-button{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 28px rgba(0,0,0,.25); } .gavdi-final-button:hover{ color:#04152d; } .gavdi-final-phone{ border:1px solid rgba(240,180,41,.50); color:#ffffff; background:rgba(255,255,255,.035); } .gavdi-final-phone:hover{ color:#ffffff; border-color:#f0b429; } .gavdi-final-button > span, .gavdi-final-phone > span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border-radius:50%; font-size:18px; font-weight:800; } .gavdi-final-button > span{ background:rgba(4,21,45,.12); } .gavdi-final-phone > span{ color:#f0b429; background:rgba(240,180,41,.11); } .gavdi-final-button strong, .gavdi-final-phone strong{ display:block; font-size:16px; line-height:1.3; } .gavdi-final-phone small{ display:block; margin-top:2px; font-size:15px; opacity:.75; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .gavdi-hero h1{ font-size:65px; } .gavdi-article{ grid-template-columns:60px minmax(0,1fr) 140px; } .gavdi-article-content h3{ font-size:22px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavdi-hero{ padding:85px 0 75px; } .gavdi-hero h1{ font-size:54px; } .gavdi-hero-intro{ font-size:17px; } .gavdi-editorial-layout{ grid-template-columns:1fr; gap:30px; } .gavdi-editorial-copy{ padding-left:0; padding-top:25px; border-left:0; border-top:2px solid rgba(185,120,0,.35); } .gavdi-articles-header{ grid-template-columns:1fr; gap:20px; } .gavdi-article{ grid-template-columns:55px minmax(0,1fr); } .gavdi-article-button{ grid-column:2; justify-self:start; } .gavdi-themes-layout{ grid-template-columns:1fr; gap:45px; } .gavdi-final-inner{ flex-direction:column; align-items:flex-start; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavdi-hero{ padding:65px 0 58px; } .gavdi-hero-kicker{ font-size:15px; letter-spacing:1px; } .gavdi-hero h1{ font-size:40px; letter-spacing:-1.5px; line-height:1.04; } .gavdi-hero-intro{ font-size:16px; line-height:1.72; } .gavdi-hero-meta{ grid-template-columns:1fr; } .gavdi-hero-meta div{ justify-content:flex-start; min-height:72px; border-right:0; border-bottom:1px solid rgba(255,255,255,.11); } .gavdi-hero-meta div:last-child{ border-bottom:0; } .gavdi-editorial{ padding:60px 0 45px; } .gavdi-editorial-heading h2{ font-size:35px; } .gavdi-editorial-copy p{ font-size:15px; } .gavdi-articles{ padding:65px 0 70px; } .gavdi-articles-header h2{ font-size:40px; } .gavdi-article{ grid-template-columns:42px minmax(0,1fr); gap:14px; min-height:0; padding:27px 0; } .gavdi-article:hover{ padding-left:10px; padding-right:10px; } .gavdi-article-number{ font-size:20px; } .gavdi-article-content > span{ font-size:15px; } .gavdi-article-content h3{ font-size:20px; line-height:1.35; } .gavdi-article-content p{ font-size:15px; line-height:1.7; } .gavdi-article-button{ grid-column:2; min-height:48px; } .gavdi-themes{ padding:65px 0; } .gavdi-themes-heading h2{ font-size:36px; } .gavdi-theme-grid{ grid-template-columns:1fr; } .gavdi-theme{ min-height:150px; } .gavdi-final-cta{ padding:45px 0; } .gavdi-final-inner{ padding:27px 20px; } .gavdi-final-copy h2{ font-size:25px; } .gavdi-final-actions{ width:100%; } .gavdi-final-button, .gavdi-final-phone{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavdi-hero h1{ font-size:35px; } .gavdi-hero h1 strong{ margin-top:7px; } .gavdi-hero-intro{ font-size:15px; } .gavdi-editorial-heading h2{ font-size:31px; } .gavdi-articles-header h2{ font-size:35px; } .gavdi-article-content h3{ font-size:19px; } .gavdi-themes-heading h2{ font-size:31px; } } /* ========================================================= SECTION 50C SDV CHALLENGES IN DELHI UNIQUE CSS NAMESPACE: gavd50c- BRAND: Deep Navy #04152d Navy #061d3d Royal Navy #092f62 Gold #b97800 Gold #d99a16 Gold #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavd50c-hero, .gavd50c-analysis, .gavd50c-response{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavd50c-hero *, .gavd50c-analysis *, .gavd50c-response *{ box-sizing:border-box; } .gavd50c-hero a, .gavd50c-analysis a, .gavd50c-response a{ text-decoration:none; } /* ========================================================= SECTION 01 HERO ========================================================= */ .gavd50c-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 84% 18%, rgba(240,180,41,.14), transparent 31% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gavd50c-hero-grid{ position:absolute; inset:0; pointer-events:none; } .gavd50c-hero-grid:before{ content:""; position:absolute; width:760px; height:760px; right:-410px; top:-330px; border:1px solid rgba(240,180,41,.13); border-radius:50%; } .gavd50c-hero-grid:after{ content:""; position:absolute; width:500px; height:500px; right:-260px; top:-190px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .gavd50c-hero-inner{ position:relative; z-index:2; max-width:1080px; margin:auto; text-align:center; } /* ========================================================= HERO KICKER ========================================================= */ .gavd50c-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.6px; line-height:1.5; } .gavd50c-kicker span{ width:42px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } /* ========================================================= HERO H1 ========================================================= */ .gavd50c-hero h1{ margin:0; color:#ffffff; font-size:clamp(48px,6vw,78px); line-height:1.01; letter-spacing:-3px; font-weight:750; } .gavd50c-hero h1 strong{ display:block; color:#f0b429; font-weight:750; } .gavd50c-hero-lead{ max-width:900px; margin:31px auto 0; color:#dce5ee; font-size:18px; line-height:1.8; } .gavd50c-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO DATA STRIP ========================================================= */ .gavd50c-hero-strip{ display:grid; grid-template-columns:repeat(4,1fr); max-width:850px; margin:48px auto 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .gavd50c-hero-strip div{ display:flex; align-items:center; justify-content:center; gap:11px; min-height:92px; padding:15px; border-right:1px solid rgba(255,255,255,.12); } .gavd50c-hero-strip div:last-child{ border-right:0; } .gavd50c-hero-strip strong{ color:#f0b429; font-size:26px; font-weight:900; line-height:1; } .gavd50c-hero-strip span{ color:#d1dce7; font-size:15px; line-height:1.35; text-align:left; } /* ========================================================= HERO BOTTOM ========================================================= */ .gavd50c-hero-bottom{ display:flex; align-items:center; justify-content:center; gap:35px; max-width:900px; margin:35px auto 0; } .gavd50c-hero-bottom p{ max-width:590px; margin:0; color:#cbd7e3; font-size:15px; line-height:1.75; text-align:left; } .gavd50c-primary-cta{ display:flex; align-items:center; gap:12px; flex:none; min-width:245px; min-height:64px; padding:10px 17px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 15px 30px rgba(0,0,0,.28); transition: transform .25s ease, box-shadow .25s ease; } .gavd50c-primary-cta:hover{ color:#04152d; transform:translateY(-2px); box-shadow: 0 20px 35px rgba(0,0,0,.32); } .gavd50c-primary-cta > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:50%; background:rgba(4,21,45,.12); font-size:19px; } .gavd50c-primary-cta strong{ display:block; font-size:16px; line-height:1.25; } .gavd50c-primary-cta small{ display:block; margin-top:3px; font-size:15px; opacity:.72; } /* ========================================================= SECTION 02 ANALYSIS ========================================================= */ .gavd50c-analysis{ padding:100px 0 105px; background: linear-gradient( 180deg, #f9fbfd 0%, #eef3f8 100% ); } .gavd50c-analysis-header{ max-width:900px; margin:0 auto 55px; text-align:center; } .gavd50c-section-label{ display:inline-flex; align-items:center; gap:11px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .gavd50c-section-label span{ display:flex; align-items:center; justify-content:center; width:37px; height:37px; border:1px solid rgba(185,120,0,.45); border-radius:50%; font-size:15px; } .gavd50c-analysis-header h2{ margin:19px 0 17px; color:#061d3d; font-size:clamp(37px,4.5vw,58px); line-height:1.08; letter-spacing:-1.7px; } .gavd50c-analysis-header h2 strong{ color:#b97800; } .gavd50c-analysis-header > p{ max-width:820px; margin:auto; color:#526276; font-size:16px; line-height:1.8; } /* ========================================================= ANALYSIS CARDS ========================================================= */ .gavd50c-analysis-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(9,47,98,.15); border-left:1px solid rgba(9,47,98,.15); } .gavd50c-analysis-card{ display:grid; grid-template-columns:58px minmax(0,1fr); gap:18px; min-height:225px; padding:29px; border-right:1px solid rgba(9,47,98,.15); border-bottom:1px solid rgba(9,47,98,.15); background:rgba(255,255,255,.45); transition: background .25s ease, transform .25s ease; } .gavd50c-analysis-card:hover{ background:#ffffff; transform:translateY(-2px); } .gavd50c-card-number{ color:#b97800; font-size:25px; font-weight:900; } .gavd50c-analysis-card span{ display:block; margin-bottom:7px; color:#7a8796; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gavd50c-analysis-card h3{ margin:0 0 10px; color:#061d3d; font-size:23px; line-height:1.3; } .gavd50c-analysis-card h3 strong{ color:#b97800; } .gavd50c-analysis-card p{ margin:0; color:#526276; font-size:15px; line-height:1.75; } .gavd50c-analysis-card p strong{ color:#092f62; } /* ========================================================= METHOD BOX ========================================================= */ .gavd50c-method-box{ margin-top:48px; padding:27px 30px; border:1px solid rgba(185,120,0,.28); border-radius:11px; background: linear-gradient( 135deg, #061d3d, #092f62 ); } .gavd50c-method-title{ display:flex; align-items:center; justify-content:space-between; gap:25px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.13); } .gavd50c-method-title span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gavd50c-method-title strong{ color:#ffffff; font-size:17px; } .gavd50c-method-flow{ display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr; align-items:center; margin-top:22px; } .gavd50c-method-flow div{ display:flex; align-items:center; gap:11px; } .gavd50c-method-flow b{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:15px; } .gavd50c-method-flow span{ color:#d8e2ec; font-size:15px; line-height:1.4; } .gavd50c-method-flow i{ color:#b97800; font-size:20px; font-style:normal; text-align:center; } /* ========================================================= SECTION 03 PRACTICAL RESPONSE ========================================================= */ .gavd50c-response{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 82% 50%, rgba(240,180,41,.09), transparent 31% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gavd50c-response-pattern{ position:absolute; width:720px; height:720px; right:-390px; top:40px; border:1px solid rgba(240,180,41,.09); border-radius:50%; } .gavd50c-response-header{ position:relative; z-index:2; max-width:850px; margin-bottom:55px; } .gavd50c-section-label.light{ color:#f0b429; } .gavd50c-response-header h2{ margin:18px 0 17px; color:#ffffff; font-size:clamp(37px,4.5vw,58px); line-height:1.08; letter-spacing:-1.6px; } .gavd50c-response-header h2 strong{ color:#f0b429; } .gavd50c-response-header p{ max-width:760px; margin:0; color:#cbd7e3; font-size:16px; line-height:1.8; } /* ========================================================= RESPONSE GRID ========================================================= */ .gavd50c-response-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:stretch; } /* ========================================================= STEPS ========================================================= */ .gavd50c-steps{ border-top:1px solid rgba(255,255,255,.13); } .gavd50c-step{ display:grid; grid-template-columns:62px minmax(0,1fr); gap:20px; padding:27px 0; border-bottom:1px solid rgba(255,255,255,.13); } .gavd50c-step-number{ color:#b97800; font-size:24px; font-weight:900; } .gavd50c-step h3{ margin:0 0 8px; color:#ffffff; font-size:22px; line-height:1.3; } .gavd50c-step h3 strong{ color:#f0b429; } .gavd50c-step p{ max-width:650px; margin:0; color:#cbd7e3; font-size:15px; line-height:1.75; } .gavd50c-step p strong{ color:#ffffff; } /* ========================================================= DELHI PANEL ========================================================= */ .gavd50c-delhi-panel{ position:relative; padding:31px; border:1px solid rgba(240,180,41,.28); border-radius:12px; background: linear-gradient( 145deg, rgba(9,47,98,.96), rgba(4,21,45,.96) ); box-shadow: 0 22px 45px rgba(0,0,0,.24); } .gavd50c-panel-top{ padding-bottom:21px; border-bottom:1px solid rgba(255,255,255,.12); } .gavd50c-panel-top span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gavd50c-panel-top strong{ display:block; color:#ffffff; font-size:23px; line-height:1.35; } .gavd50c-delhi-panel ul{ margin:0; padding:7px 0 0; list-style:none; } .gavd50c-delhi-panel li{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:11px; align-items:center; min-height:58px; border-bottom:1px solid rgba(255,255,255,.09); } .gavd50c-delhi-panel li:last-child{ border-bottom:0; } .gavd50c-delhi-panel li span{ color:#b97800; font-size:15px; font-weight:900; } .gavd50c-delhi-panel li strong{ color:#dbe5ee; font-size:15px; line-height:1.45; } .gavd50c-panel-note{ margin-top:20px; padding:18px; border-left:3px solid #f0b429; background:rgba(255,255,255,.045); } .gavd50c-panel-note span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavd50c-panel-note p{ margin:0; color:#cbd7e3; font-size:15px; line-height:1.7; } .gavd50c-panel-note p strong{ color:#ffffff; } /* ========================================================= FINAL CTA ========================================================= */ .gavd50c-final-cta{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:60px; padding:31px 35px; border:1px solid rgba(240,180,41,.27); border-radius:12px; background: linear-gradient( 100deg, rgba(255,255,255,.055), rgba(255,255,255,.025) ); } .gavd50c-final-cta > div:first-child > span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gavd50c-final-cta h3{ margin:0; color:#ffffff; font-size:27px; line-height:1.3; } .gavd50c-final-cta h3 strong{ color:#f0b429; } .gavd50c-actions{ display:flex; align-items:center; gap:10px; flex:none; } .gavd50c-final-button, .gavd50c-phone-button{ display:flex; align-items:center; gap:11px; min-height:58px; padding:9px 17px; border-radius:8px; } .gavd50c-final-button{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 27px rgba(0,0,0,.25); } .gavd50c-final-button:hover{ color:#04152d; } .gavd50c-phone-button{ border:1px solid rgba(240,180,41,.50); color:#ffffff; background:rgba(255,255,255,.035); } .gavd50c-phone-button:hover{ color:#ffffff; border-color:#f0b429; } .gavd50c-final-button > span, .gavd50c-phone-button > span{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; flex:none; border-radius:50%; font-size:18px; } .gavd50c-final-button > span{ background:rgba(4,21,45,.12); } .gavd50c-phone-button > span{ color:#f0b429; background:rgba(240,180,41,.10); } .gavd50c-final-button strong, .gavd50c-phone-button strong{ display:block; font-size:15px; line-height:1.3; } .gavd50c-phone-button small{ display:block; margin-top:2px; color:#c9d5e1; font-size:15px; } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavd50c-hero{ padding:80px 0 70px; } .gavd50c-hero h1{ font-size:55px; } .gavd50c-hero-strip{ grid-template-columns:repeat(2,1fr); } .gavd50c-hero-strip div:nth-child(2){ border-right:0; } .gavd50c-hero-strip div:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.12); } .gavd50c-analysis{ padding:80px 0; } .gavd50c-analysis-grid{ grid-template-columns:1fr; } .gavd50c-method-flow{ grid-template-columns:1fr; gap:13px; } .gavd50c-method-flow i{ display:none; } .gavd50c-method-flow div{ padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.09); } .gavd50c-method-flow div:last-child{ border-bottom:0; } .gavd50c-response{ padding:80px 0; } .gavd50c-response-grid{ grid-template-columns:1fr; gap:40px; } .gavd50c-final-cta{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavd50c-hero{ padding:62px 0 58px; } .gavd50c-kicker{ flex-wrap:wrap; font-size:15px; letter-spacing:1px; } .gavd50c-hero h1{ font-size:41px; letter-spacing:-1.6px; } .gavd50c-hero-lead{ font-size:16px; line-height:1.75; } .gavd50c-hero-strip{ grid-template-columns:1fr; } .gavd50c-hero-strip div{ justify-content:flex-start; min-height:70px; border-right:0; border-bottom:1px solid rgba(255,255,255,.11); } .gavd50c-hero-strip div:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.11); } .gavd50c-hero-strip div:last-child{ border-bottom:0; } .gavd50c-hero-bottom{ flex-direction:column; align-items:stretch; gap:23px; } .gavd50c-hero-bottom p{ font-size:15px; } .gavd50c-primary-cta{ width:100%; justify-content:flex-start; } .gavd50c-analysis{ padding:65px 0 70px; } .gavd50c-analysis-header{ margin-bottom:38px; } .gavd50c-analysis-header h2{ font-size:36px; } .gavd50c-analysis-header > p{ font-size:15px; } .gavd50c-analysis-card{ grid-template-columns:43px minmax(0,1fr); padding:24px 18px; } .gavd50c-analysis-card h3{ font-size:21px; } .gavd50c-method-box{ padding:23px 18px; } .gavd50c-method-title{ display:block; } .gavd50c-method-title strong{ display:block; margin-top:8px; font-size:16px; line-height:1.5; } .gavd50c-response{ padding:68px 0; } .gavd50c-response-header h2{ font-size:36px; } .gavd50c-response-header p{ font-size:15px; } .gavd50c-step{ grid-template-columns:43px minmax(0,1fr); gap:13px; } .gavd50c-step h3{ font-size:20px; } .gavd50c-delhi-panel{ padding:23px 18px; } .gavd50c-final-cta{ padding:25px 18px; } .gavd50c-final-cta h3{ font-size:23px; } .gavd50c-actions{ width:100%; flex-direction:column; align-items:stretch; } .gavd50c-final-button, .gavd50c-phone-button{ width:100%; justify-content:flex-start; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavd50c-hero h1{ font-size:35px; } .gavd50c-analysis-header h2, .gavd50c-response-header h2{ font-size:31px; } .gavd50c-analysis-card h3{ font-size:19px; } .gavd50c-analysis-card p, .gavd50c-step p{ font-size:15px; } } /* ========================================================= DELHI SUB-REGISTRAR STRUCTURE GOVERNMENT APPROVED VALUERS DELHI NCR UNIQUE NAMESPACE: delsr- ROYAL BRAND COLOURS Deep Navy #04152d Navy #061d3d Royal Navy #092f62 Gold #b97800 Gold #d99a16 Gold #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .delsr-hero, .delsr-structure, .delsr-relevance{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .delsr-hero *, .delsr-structure *, .delsr-relevance *{ box-sizing:border-box; } .delsr-hero a, .delsr-structure a, .delsr-relevance a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .delsr-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 82% 18%, rgba(240,180,41,.13), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .delsr-hero-grid{ position:absolute; inset:0; pointer-events:none; opacity:.75; background: linear-gradient( 90deg, transparent 0, transparent 8%, rgba(240,180,41,.045) 8.05%, transparent 8.1%, transparent 92%, rgba(240,180,41,.045) 92.05%, transparent 92.1% ); } .delsr-hero-grid:before{ content:""; position:absolute; left:10%; top:0; width:1px; height:100%; background: linear-gradient( 180deg, transparent, rgba(240,180,41,.14), transparent ); } .delsr-hero-grid:after{ content:""; position:absolute; right:11%; top:28%; width:1px; height:52%; background: linear-gradient( 180deg, transparent, rgba(240,180,41,.12), transparent ); } .delsr-hero-orbit{ position:absolute; width:680px; height:680px; right:-340px; top:-280px; border:1px solid rgba(240,180,41,.14); border-radius:50%; } .delsr-hero-orbit:before{ content:""; position:absolute; inset:75px; border:1px solid rgba(240,180,41,.07); border-radius:50%; } .delsr-hero-inner{ position:relative; z-index:2; max-width:1050px; margin:auto; text-align:center; } .delsr-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .delsr-kicker span{ width:38px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .delsr-hero h1{ margin:0; color:#ffffff; font-size:clamp(48px,6.5vw,82px); font-weight:750; line-height:1; letter-spacing:-3px; } .delsr-hero h1 strong{ display:block; margin-top:9px; color:#f0b429; font-weight:750; } .delsr-hero-lead{ max-width:850px; margin:31px auto 0; color:#dbe5ef; font-size:18px; line-height:1.8; } .delsr-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO STATS ========================================================= */ .delsr-hero-statline{ display:grid; grid-template-columns:repeat(3,1fr); max-width:700px; margin:46px auto 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .delsr-hero-statline div{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:92px; border-right:1px solid rgba(255,255,255,.12); } .delsr-hero-statline div:last-child{ border-right:0; } .delsr-hero-statline strong{ color:#f0b429; font-size:29px; font-weight:900; } .delsr-hero-statline span{ color:#d4dfeb; font-size:15px; line-height:1.4; text-align:left; } /* ========================================================= HERO NOTE ========================================================= */ .delsr-hero-note{ display:flex; align-items:flex-start; gap:18px; max-width:850px; margin:34px auto 0; padding:19px 21px; text-align:left; border-left:3px solid #b97800; border-radius:0 9px 9px 0; background:rgba(255,255,255,.045); } .delsr-note-mark{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; flex:none; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .delsr-hero-note p{ margin:0; color:#cbd7e3; font-size:15px; line-height:1.7; } .delsr-hero-note strong{ color:#ffffff; } /* ========================================================= SECTION 02 — STRUCTURE ========================================================= */ .delsr-structure{ padding:95px 0 105px; background: linear-gradient( 180deg, #f8fafc 0%, #eef3f8 100% ); } .delsr-section-heading{ max-width:900px; margin:0 auto 55px; text-align:center; } .delsr-section-index{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; } .delsr-section-index span{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .delsr-section-index b{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .delsr-section-heading h2{ margin:0 0 17px; color:#061d3d; font-size:clamp(38px,4.7vw,59px); line-height:1.06; letter-spacing:-1.7px; } .delsr-section-heading h2 strong{ color:#b97800; } .delsr-section-heading > p{ max-width:800px; margin:auto; color:#536274; font-size:16px; line-height:1.8; } .delsr-section-heading p strong{ color:#092f62; } /* ========================================================= STRUCTURE VISUAL ========================================================= */ .delsr-structure-map{ position:relative; max-width:920px; margin:auto; } .delsr-structure-level{ position:relative; display:grid; grid-template-columns:75px 1fr; gap:25px; align-items:center; padding:28px 32px; border:1px solid rgba(9,47,98,.13); border-radius:12px; background:#ffffff; box-shadow: 0 12px 30px rgba(6,29,61,.06); } .delsr-structure-level.featured{ border-color:rgba(185,120,0,.38); background: linear-gradient( 135deg, #ffffff, #fffaf0 ); box-shadow: 0 17px 35px rgba(185,120,0,.10); } .delsr-level-number{ display:flex; align-items:center; justify-content:center; width:55px; height:55px; border-radius:50%; color:#ffffff; background: linear-gradient( 135deg, #092f62, #061d3d ); font-size:17px; font-weight:900; } .delsr-featured .delsr-level-number{ background: linear-gradient( 135deg, #f0b429, #b97800 ); color:#061d3d; } .delsr-level-content span{ display:block; margin-bottom:6px; color:#7d8997; font-size:15px; font-weight:850; letter-spacing:1.1px; } .delsr-level-content h3{ margin:0 0 8px; color:#061d3d; font-size:25px; line-height:1.25; } .delsr-level-content h3 strong{ color:#b97800; } .delsr-level-content p{ max-width:720px; margin:0; color:#586778; font-size:15px; line-height:1.7; } .delsr-level-content p strong{ color:#092f62; } /* ========================================================= CONNECTOR ========================================================= */ .delsr-connector{ display:flex; align-items:center; justify-content:center; width:44px; height:48px; margin:0 auto; color:#b97800; font-size:21px; font-weight:900; } /* ========================================================= DISTRICT BAND ========================================================= */ .delsr-district-band{ margin-top:65px; padding:30px; border-radius:13px; background: linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); box-shadow: 0 20px 45px rgba(6,29,61,.15); } .delsr-band-heading{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.12); } .delsr-band-heading span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .delsr-band-heading strong{ color:#ffffff; font-size:20px; } .delsr-district-grid{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:21px; } .delsr-district-grid div{ display:flex; align-items:center; gap:9px; min-height:52px; padding:9px 12px; border-right:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); } .delsr-district-grid b{ color:#b97800; font-size:15px; } .delsr-district-grid span{ color:#d8e2ed; font-size:15px; line-height:1.35; } /* ========================================================= SECTION 03 — RELEVANCE ========================================================= */ .delsr-relevance{ padding:105px 0 95px; color:#ffffff; background: linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .delsr-relevance-glow{ position:absolute; width:750px; height:750px; right:-400px; top:-180px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .delsr-relevance-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.72fr); gap:70px; align-items:center; } .delsr-section-index.light{ justify-content:flex-start; } .delsr-section-index.light span{ border-color:rgba(240,180,41,.45); color:#f0b429; } .delsr-section-index.light b{ color:#f0b429; } .delsr-relevance-content h2{ max-width:760px; margin:0 0 24px; color:#ffffff; font-size:clamp(38px,4.7vw,60px); line-height:1.06; letter-spacing:-1.7px; } .delsr-relevance-content h2 strong{ color:#f0b429; } .delsr-relevance-content > p{ max-width:780px; margin:0 0 19px; color:#d5e0eb; font-size:16px; line-height:1.85; } .delsr-relevance-content > p strong{ color:#ffffff; } /* ========================================================= RESEARCH FLOW ========================================================= */ .delsr-flow{ display:grid; grid-template-columns:repeat(2,1fr); margin-top:34px; border-top:1px solid rgba(255,255,255,.13); border-left:1px solid rgba(255,255,255,.13); } .delsr-flow > div{ min-height:170px; padding:22px; border-right:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .delsr-flow span{ display:block; margin-bottom:22px; color:#b97800; font-size:15px; font-weight:900; } .delsr-flow strong{ display:block; margin-bottom:8px; color:#ffffff; font-size:18px; line-height:1.35; } .delsr-flow p{ margin:0; color:#bfcddd; font-size:15px; line-height:1.6; } /* ========================================================= INSIGHT PANEL ========================================================= */ .delsr-insight-panel{ position:relative; padding:30px; border:1px solid rgba(240,180,41,.28); border-radius:13px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.025) ); box-shadow: 0 22px 45px rgba(0,0,0,.18); } .delsr-panel-top{ padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.12); } .delsr-panel-top span{ display:block; margin-bottom:10px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .delsr-panel-top strong{ display:block; color:#ffffff; font-size:25px; line-height:1.35; } /* ========================================================= PANEL LIST ========================================================= */ .delsr-panel-list > div{ display:grid; grid-template-columns:40px 1fr; gap:11px; padding:19px 0; border-bottom:1px solid rgba(255,255,255,.09); } .delsr-panel-list > div:last-child{ border-bottom:0; } .delsr-panel-list > div > span{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid rgba(240,180,41,.38); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .delsr-panel-list strong{ display:block; margin-bottom:4px; color:#ffffff; font-size:17px; } .delsr-panel-list p{ grid-column:2; margin:-3px 0 0; color:#bcc9d7; font-size:15px; line-height:1.55; } /* ========================================================= PANEL FOOTER ========================================================= */ .delsr-panel-footer{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:5px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); } .delsr-panel-footer span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .delsr-panel-footer strong{ color:#ffffff; font-size:15px; } /* ========================================================= CTA ========================================================= */ .delsr-cta{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:70px; padding:34px 38px; border-radius:13px; background: linear-gradient( 120deg, #ffffff, #f8f4eb ); box-shadow: 0 20px 45px rgba(0,0,0,.20); } .delsr-cta-copy > span{ display:block; margin-bottom:8px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.3px; } .delsr-cta-copy h3{ max-width:720px; margin:0 0 9px; color:#061d3d; font-size:29px; line-height:1.3; } .delsr-cta-copy h3 strong{ color:#b97800; } .delsr-cta-copy p{ max-width:680px; margin:0; color:#586778; font-size:15px; line-height:1.7; } .delsr-cta-copy p strong{ color:#092f62; } /* ========================================================= CTA BUTTONS ========================================================= */ .delsr-cta-actions{ display:flex; flex-direction:column; gap:11px; min-width:245px; flex:none; } .delsr-cta-primary, .delsr-cta-phone{ display:flex; align-items:center; gap:12px; min-height:61px; padding:10px 17px; border-radius:8px; } .delsr-cta-primary{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 27px rgba(6,29,61,.20); } .delsr-cta-primary:hover{ color:#04152d; } .delsr-cta-phone{ border:1px solid rgba(185,120,0,.50); color:#092f62; background:#ffffff; } .delsr-cta-phone:hover{ color:#092f62; border-color:#b97800; } .delsr-cta-primary > span, .delsr-cta-phone > span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border-radius:50%; font-size:18px; font-weight:900; } .delsr-cta-primary > span{ background:rgba(4,21,45,.12); } .delsr-cta-phone > span{ color:#b97800; background:rgba(185,120,0,.10); } .delsr-cta-primary strong, .delsr-cta-phone strong{ display:block; font-size:16px; line-height:1.3; } .delsr-cta-phone small{ display:block; margin-top:2px; color:#667486; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .delsr-hero h1{ font-size:65px; } .delsr-relevance-layout{ gap:45px; } .delsr-district-grid{ grid-template-columns:repeat(4,1fr); } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .delsr-hero{ padding:80px 0 70px; } .delsr-hero h1{ font-size:55px; } .delsr-relevance-layout{ grid-template-columns:1fr; gap:45px; } .delsr-district-grid{ grid-template-columns:repeat(3,1fr); } .delsr-cta{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .delsr-hero{ padding:65px 0 58px; } .delsr-kicker{ flex-wrap:wrap; font-size:15px; letter-spacing:1px; } .delsr-hero h1{ font-size:41px; line-height:1.04; letter-spacing:-1.6px; } .delsr-hero-lead{ font-size:16px; line-height:1.75; } .delsr-hero-statline{ grid-template-columns:1fr; } .delsr-hero-statline div{ justify-content:flex-start; min-height:70px; padding-left:20px; border-right:0; border-bottom:1px solid rgba(255,255,255,.11); } .delsr-hero-statline div:last-child{ border-bottom:0; } .delsr-hero-note{ padding:16px; } .delsr-structure{ padding:70px 0 75px; } .delsr-section-heading h2{ font-size:37px; } .delsr-section-heading > p{ font-size:15px; } .delsr-structure-level{ grid-template-columns:50px 1fr; gap:16px; padding:22px 18px; } .delsr-level-number{ width:45px; height:45px; font-size:15px; } .delsr-level-content h3{ font-size:21px; } .delsr-level-content p{ font-size:15px; } .delsr-district-band{ padding:22px 18px; } .delsr-band-heading{ align-items:flex-start; flex-direction:column; } .delsr-district-grid{ grid-template-columns:repeat(2,1fr); } .delsr-relevance{ padding:70px 0 65px; } .delsr-relevance-content h2{ font-size:37px; } .delsr-relevance-content > p{ font-size:15px; line-height:1.75; } .delsr-flow{ grid-template-columns:1fr; } .delsr-flow > div{ min-height:145px; } .delsr-insight-panel{ padding:23px 19px; } .delsr-panel-top strong{ font-size:22px; } .delsr-panel-footer{ align-items:flex-start; flex-direction:column; } .delsr-cta{ padding:27px 20px; } .delsr-cta-copy h3{ font-size:25px; } .delsr-cta-actions{ width:100%; } .delsr-cta-primary, .delsr-cta-phone{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .delsr-hero h1{ font-size:35px; } .delsr-hero-lead{ font-size:15px; } .delsr-section-heading h2, .delsr-relevance-content h2{ font-size:31px; } .delsr-district-grid{ grid-template-columns:1fr; } .delsr-district-grid div{ border-right:0; } .delsr-structure-level{ grid-template-columns:1fr; } .delsr-level-number{ margin-bottom:2px; } } /* ========================================================= SOUTH DELHI PREMIUM LOCALITIES UNIQUE CSS NAMESPACE: sdplx- ROYAL BRAND COLOURS Deep Navy #04152d Dark Navy #061d3d Royal Navy #092f62 Gold #b97800 Gold #d99a16 Bright Gold #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .sdplx-hero, .sdplx-localities, .sdplx-method{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .sdplx-hero *, .sdplx-localities *, .sdplx-method *{ box-sizing:border-box; } .sdplx-hero a, .sdplx-localities a, .sdplx-method a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .sdplx-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 82% 30%, rgba(240,180,41,.13), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .sdplx-hero-pattern{ position:absolute; inset:0; pointer-events:none; } .sdplx-hero-pattern:before{ content:""; position:absolute; width:650px; height:650px; right:-340px; top:-260px; border:1px solid rgba(240,180,41,.14); border-radius:50%; } .sdplx-hero-pattern:after{ content:""; position:absolute; width:440px; height:440px; right:-235px; top:-155px; border:1px solid rgba(240,180,41,.09); border-radius:50%; } .sdplx-hero-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.65fr); gap:75px; align-items:center; } .sdplx-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; } .sdplx-eyebrow span{ width:40px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .sdplx-hero h1{ max-width:850px; margin:0 0 27px; color:#ffffff; font-size:clamp(48px,6vw,76px); line-height:1.01; letter-spacing:-3px; } .sdplx-hero h1 strong{ display:block; color:#f0b429; font-weight:800; } .sdplx-hero h1 small{ display:block; max-width:680px; margin-top:18px; color:#dce6f0; font-size:clamp(20px,2.2vw,28px); font-weight:500; line-height:1.35; letter-spacing:-.4px; } .sdplx-hero-lead{ max-width:790px; color:#f0f4f8 !important; font-size:18px !important; line-height:1.8 !important; } .sdplx-hero-content p{ max-width:800px; margin:0 0 19px; color:#cbd8e5; font-size:16px; line-height:1.8; } .sdplx-hero-content p strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO TAGS ========================================================= */ .sdplx-hero-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; } .sdplx-hero-tags span{ padding:9px 14px; border:1px solid rgba(240,180,41,.28); border-radius:50px; color:#f0b429; background:rgba(255,255,255,.025); font-size:15px; font-weight:700; } /* ========================================================= HERO ACTIONS ========================================================= */ .sdplx-hero-actions{ display:flex; align-items:center; gap:11px; margin-top:32px; } .sdplx-primary-btn, .sdplx-phone-btn{ display:flex; align-items:center; gap:11px; min-height:61px; padding:10px 17px; border-radius:8px; } .sdplx-primary-btn{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 28px rgba(0,0,0,.25); } .sdplx-primary-btn:hover{ color:#04152d; } .sdplx-phone-btn{ border:1px solid rgba(240,180,41,.48); color:#ffffff; background:rgba(255,255,255,.035); } .sdplx-phone-btn:hover{ color:#ffffff; border-color:#f0b429; } .sdplx-primary-btn span, .sdplx-phone-btn span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:18px; } .sdplx-primary-btn span{ background:rgba(4,21,45,.13); } .sdplx-phone-btn span{ color:#f0b429; background:rgba(240,180,41,.11); } .sdplx-primary-btn strong, .sdplx-phone-btn strong{ font-size:16px; } .sdplx-phone-btn small{ font-size:15px; opacity:.75; } /* ========================================================= HERO INDEX ========================================================= */ .sdplx-hero-index{ position:relative; min-height:510px; padding:25px; border:1px solid rgba(240,180,41,.23); border-radius:15px; background: linear-gradient( 145deg, rgba(255,255,255,.06), rgba(255,255,255,.015) ); } .sdplx-index-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.12); } .sdplx-index-top span, .sdplx-index-top strong{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .sdplx-index-ring{ position:absolute; top:115px; left:50%; width:280px; height:280px; display:flex; align-items:center; justify-content:center; transform:translateX(-50%); border:1px solid rgba(240,180,41,.32); border-radius:50%; } .sdplx-index-ring:before, .sdplx-index-ring:after{ content:""; position:absolute; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .sdplx-index-ring:before{ width:220px; height:220px; } .sdplx-index-ring:after{ width:335px; height:335px; } .sdplx-ring-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:11px; width:145px; height:145px; border-radius:50%; background: linear-gradient( 145deg, #092f62, #04152d ); box-shadow: 0 20px 45px rgba(0,0,0,.35); } .sdplx-ring-inner strong{ color:#f0b429; font-size:38px; line-height:1; } .sdplx-ring-inner span{ color:#dbe5ef; font-size:15px; line-height:1.3; font-weight:700; } .sdplx-index-bottom{ position:absolute; left:25px; right:25px; bottom:25px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.12); } .sdplx-index-bottom div{ padding:16px 8px 4px; border-right:1px solid rgba(255,255,255,.10); } .sdplx-index-bottom div:last-child{ border-right:0; } .sdplx-index-bottom strong{ display:block; margin-bottom:5px; color:#f0b429; font-size:20px; } .sdplx-index-bottom span{ color:#cbd8e5; font-size:15px; } /* ========================================================= SECTION 02 — LOCALITIES ========================================================= */ .sdplx-localities{ padding:100px 0; background: linear-gradient( 180deg, #ffffff 0%, #f3f7fb 100% ); } .sdplx-section-heading{ display:grid; grid-template-columns:1fr .75fr; gap:65px; align-items:end; margin-bottom:50px; } .sdplx-section-label{ display:inline-flex; align-items:center; gap:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.4px; } .sdplx-section-label:before{ content:""; width:34px; height:2px; background:#b97800; } .sdplx-section-heading h2{ max-width:750px; margin:16px 0 0; color:#061d3d; font-size:clamp(38px,4.6vw,60px); line-height:1.05; letter-spacing:-1.8px; } .sdplx-section-heading h2 strong{ color:#b97800; } .sdplx-section-heading > p{ margin:0; color:#566577; font-size:16px; line-height:1.8; } /* ========================================================= LOCALITY GRID ========================================================= */ .sdplx-locality-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(9,47,98,.14); border-left:1px solid rgba(9,47,98,.14); } .sdplx-locality-card{ position:relative; min-height:310px; padding:31px; border-right:1px solid rgba(9,47,98,.14); border-bottom:1px solid rgba(9,47,98,.14); background:#ffffff; transition: background .25s ease, transform .25s ease; } .sdplx-locality-card:hover{ z-index:2; background: linear-gradient( 145deg, #ffffff, #f6f9fc ); transform:translateY(-3px); } .sdplx-card-number{ margin-bottom:27px; color:#b97800; font-size:24px; font-weight:900; } .sdplx-locality-card > span{ display:block; margin-bottom:7px; color:#7c8997; font-size:15px; font-weight:850; letter-spacing:1.15px; } .sdplx-locality-card h3{ margin:0 0 13px; color:#061d3d; font-size:27px; line-height:1.25; } .sdplx-locality-card p{ max-width:600px; margin:0; color:#536274; font-size:15px; line-height:1.75; } .sdplx-locality-card p strong{ color:#092f62; font-weight:750; } /* ========================================================= LOCALITY KEY ========================================================= */ .sdplx-card-key{ display:flex; align-items:center; gap:9px; margin-top:22px; padding-top:14px; border-top:1px solid rgba(9,47,98,.10); } .sdplx-card-key b{ color:#b97800; font-size:15px; } .sdplx-card-key span{ color:#657486; font-size:15px; } /* ========================================================= SECTION 03 — METHOD ========================================================= */ .sdplx-method{ padding:100px 0; color:#ffffff; background: linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .sdplx-method-pattern{ position:absolute; width:700px; height:700px; right:-400px; top:-200px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .sdplx-method-heading{ position:relative; z-index:2; max-width:850px; margin-bottom:55px; } .sdplx-method-heading .sdplx-section-label{ color:#f0b429; } .sdplx-method-heading .sdplx-section-label:before{ background:#f0b429; } .sdplx-method-heading h2{ margin:16px 0 17px; color:#ffffff; font-size:clamp(38px,4.6vw,60px); line-height:1.05; letter-spacing:-1.7px; } .sdplx-method-heading h2 strong{ color:#f0b429; } .sdplx-method-heading p{ max-width:760px; margin:0; color:#cbd8e5; font-size:16px; line-height:1.8; } /* ========================================================= METHOD LAYOUT ========================================================= */ .sdplx-method-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(350px,.65fr); gap:70px; align-items:stretch; } /* ========================================================= METHOD AXIS ========================================================= */ .sdplx-method-axis{ border-top:1px solid rgba(255,255,255,.13); } .sdplx-method-item{ display:grid; grid-template-columns:62px 1fr; gap:20px; padding:25px 0; border-bottom:1px solid rgba(255,255,255,.13); } .sdplx-method-item > span{ display:flex; align-items:center; justify-content:center; width:43px; height:43px; border:1px solid rgba(240,180,41,.40); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .sdplx-method-item strong{ display:block; margin-bottom:7px; color:#ffffff; font-size:20px; line-height:1.35; } .sdplx-method-item p{ max-width:680px; margin:0; color:#c4d1de; font-size:15px; line-height:1.7; } .sdplx-method-item p strong{ display:inline; color:#f0b429; font-size:15px; } /* ========================================================= METHOD CTA PANEL ========================================================= */ .sdplx-method-panel{ position:relative; padding:35px; border:1px solid rgba(240,180,41,.27); border-radius:14px; background: linear-gradient( 145deg, #092f62, #061d3d ); box-shadow: 0 22px 48px rgba(0,0,0,.25); } .sdplx-panel-mark{ display:flex; align-items:center; justify-content:center; width:62px; height:62px; margin-bottom:27px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:20px; font-weight:900; } .sdplx-method-panel > span{ display:block; margin-bottom:10px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .sdplx-method-panel h3{ margin:0 0 17px; color:#ffffff; font-size:29px; line-height:1.3; } .sdplx-method-panel h3 strong{ color:#f0b429; } .sdplx-method-panel > p{ margin:0 0 25px; color:#ccd8e4; font-size:15px; line-height:1.75; } .sdplx-method-panel > p strong{ color:#ffffff; } /* ========================================================= PANEL CTA ========================================================= */ .sdplx-panel-button{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:62px; margin-bottom:11px; padding:10px 18px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 28px rgba(0,0,0,.25); } .sdplx-panel-button:hover{ color:#04152d; } .sdplx-panel-button span{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:rgba(4,21,45,.12); font-size:18px; } .sdplx-panel-button strong{ font-size:16px; } .sdplx-panel-phone{ display:flex; align-items:center; gap:13px; min-height:62px; padding:10px 16px; border:1px solid rgba(240,180,41,.45); border-radius:8px; color:#ffffff; background:rgba(255,255,255,.035); } .sdplx-panel-phone:hover{ color:#ffffff; border-color:#f0b429; } .sdplx-panel-phone > span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:#f0b429; background:rgba(240,180,41,.10); font-size:17px; } .sdplx-panel-phone strong{ display:block; font-size:16px; } .sdplx-panel-phone small{ display:block; margin-top:3px; color:#b9c7d5; font-size:15px; } .sdplx-panel-location{ margin-top:24px; padding-top:19px; border-top:1px solid rgba(255,255,255,.12); } .sdplx-panel-location span{ display:block; margin-bottom:4px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .sdplx-panel-location strong{ color:#d5e0ea; font-size:15px; font-weight:500; } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .sdplx-hero{ padding:80px 0 70px; } .sdplx-hero-layout{ grid-template-columns:1fr; gap:55px; } .sdplx-hero-content{ max-width:850px; margin:auto; } .sdplx-hero-index{ width:100%; max-width:600px; min-height:470px; margin:auto; } .sdplx-section-heading{ grid-template-columns:1fr; gap:20px; } .sdplx-method-layout{ grid-template-columns:1fr; } .sdplx-method-panel{ max-width:650px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .sdplx-hero{ padding:62px 0 60px; } .sdplx-eyebrow{ flex-wrap:wrap; font-size:15px; } .sdplx-hero h1{ font-size:40px; letter-spacing:-1.5px; } .sdplx-hero h1 small{ font-size:21px; } .sdplx-hero-lead{ font-size:16px !important; } .sdplx-hero-content p{ font-size:15px; } .sdplx-hero-actions{ flex-direction:column; align-items:stretch; } .sdplx-primary-btn, .sdplx-phone-btn{ width:100%; justify-content:center; } .sdplx-hero-index{ min-height:420px; padding:20px; } .sdplx-index-ring{ width:230px; height:230px; top:100px; } .sdplx-index-ring:before{ width:180px; height:180px; } .sdplx-index-ring:after{ width:275px; height:275px; } .sdplx-ring-inner{ width:120px; height:120px; } .sdplx-ring-inner strong{ font-size:30px; } .sdplx-index-bottom{ left:20px; right:20px; bottom:20px; } .sdplx-index-bottom div{ padding:13px 5px 4px; } .sdplx-index-bottom strong{ font-size:18px; } .sdplx-localities{ padding:70px 0; } .sdplx-section-heading h2{ font-size:37px; } .sdplx-section-heading > p{ font-size:15px; } .sdplx-locality-grid{ grid-template-columns:1fr; } .sdplx-locality-card{ min-height:0; padding:26px 23px; } .sdplx-locality-card h3{ font-size:24px; } .sdplx-locality-card p{ font-size:15px; } .sdplx-method{ padding:70px 0; } .sdplx-method-heading h2{ font-size:37px; } .sdplx-method-heading p{ font-size:15px; } .sdplx-method-item{ grid-template-columns:50px 1fr; gap:13px; } .sdplx-method-item strong{ font-size:18px; } .sdplx-method-panel{ padding:27px 21px; } .sdplx-method-panel h3{ font-size:25px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .sdplx-hero h1{ font-size:35px; } .sdplx-hero h1 small{ font-size:20px; } .sdplx-hero-tags span{ font-size:15px; } .sdplx-hero-index{ min-height:390px; } .sdplx-index-ring{ width:205px; height:205px; top:95px; } .sdplx-index-ring:before{ width:160px; height:160px; } .sdplx-index-ring:after{ width:245px; height:245px; } .sdplx-ring-inner{ width:105px; height:105px; } .sdplx-ring-inner strong{ font-size:26px; } .sdplx-ring-inner span{ font-size:15px; } .sdplx-index-bottom{ grid-template-columns:repeat(2,1fr); } .sdplx-index-bottom div{ border-bottom:1px solid rgba(255,255,255,.10); } .sdplx-section-heading h2, .sdplx-method-heading h2{ font-size:32px; } .sdplx-method-panel h3{ font-size:23px; } } /* ========================================================= SOUTH DELHI MID-MARKET PROPERTY VALUATION GOVERNMENT APPROVED VALUERS DELHI NCR UNIQUE NAMESPACE: gavsdm- ROYAL BRAND PALETTE: #04152d #061d3d #092f62 #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavsdm-hero, .gavsdm-framework, .gavsdm-locality{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavsdm-hero *, .gavsdm-framework *, .gavsdm-locality *{ box-sizing:border-box; } .gavsdm-hero a, .gavsdm-framework a, .gavsdm-locality a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .gavsdm-hero{ padding:110px 0 95px; color:#ffffff; background: radial-gradient( circle at 85% 15%, rgba(240,180,41,.13), transparent 29% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } /* ========================================================= HERO GRID ========================================================= */ .gavsdm-hero-grid{ position:absolute; inset:0; pointer-events:none; opacity:.7; background: linear-gradient( 90deg, transparent 0, transparent 9%, rgba(240,180,41,.045) 9.05%, transparent 9.1%, transparent 91%, rgba(240,180,41,.045) 91.05%, transparent 91.1% ); } .gavsdm-hero-grid:before{ content:""; position:absolute; left:7%; top:0; width:1px; height:100%; background: linear-gradient( 180deg, transparent, rgba(240,180,41,.15), transparent ); } .gavsdm-hero-grid:after{ content:""; position:absolute; right:8%; top:15%; width:1px; height:65%; background: linear-gradient( 180deg, transparent, rgba(240,180,41,.13), transparent ); } /* ========================================================= HERO ORBITS ========================================================= */ .gavsdm-hero-orbit{ position:absolute; border:1px solid rgba(240,180,41,.10); border-radius:50%; pointer-events:none; } .gavsdm-hero-orbit-one{ width:700px; height:700px; right:-410px; top:-260px; } .gavsdm-hero-orbit-two{ width:470px; height:470px; right:-285px; top:-145px; border-color:rgba(240,180,41,.07); } /* ========================================================= HERO INNER ========================================================= */ .gavsdm-hero-inner{ position:relative; z-index:2; max-width:1100px; margin:auto; text-align:center; } .gavsdm-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.65px; line-height:1.5; } .gavsdm-kicker span{ width:40px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavsdm-hero h1{ max-width:950px; margin:0 auto; color:#ffffff; font-size:clamp(49px,6.5vw,78px); line-height:1; font-weight:750; letter-spacing:-3px; } .gavsdm-hero h1 strong{ display:block; margin-top:10px; color:#f0b429; } .gavsdm-hero-lead{ max-width:850px; margin:31px auto 0; color:#d8e3ee; font-size:18px; line-height:1.82; } .gavsdm-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO LOCATION STRIP ========================================================= */ .gavsdm-hero-location-strip{ display:grid; grid-template-columns:repeat(3,1fr); max-width:850px; margin:48px auto 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .gavsdm-hero-location-strip div{ min-height:90px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:15px; border-right:1px solid rgba(255,255,255,.12); } .gavsdm-hero-location-strip div:last-child{ border-right:0; } .gavsdm-hero-location-strip span{ margin-bottom:6px; color:#aebdce; font-size:15px; font-weight:700; letter-spacing:1px; } .gavsdm-hero-location-strip strong{ color:#f0b429; font-size:15px; font-weight:850; } /* ========================================================= HERO BOTTOM ========================================================= */ .gavsdm-hero-bottom{ display:flex; align-items:center; justify-content:center; gap:30px; margin-top:35px; } .gavsdm-hero-note{ padding-left:18px; border-left:2px solid #b97800; text-align:left; } .gavsdm-hero-note span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .gavsdm-hero-note strong{ color:#ffffff; font-size:16px; line-height:1.5; } .gavsdm-hero-note em{ color:#f0b429; font-style:normal; } /* ========================================================= PRIMARY CTA ========================================================= */ .gavsdm-primary-cta, .gavsdm-cta-button{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:58px; padding:0 23px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 14px 30px rgba(0,0,0,.24); transition: transform .25s ease, box-shadow .25s ease; } .gavsdm-primary-cta:hover, .gavsdm-cta-button:hover{ color:#04152d; transform:translateY(-2px); box-shadow: 0 18px 34px rgba(0,0,0,.30); } .gavsdm-primary-cta span, .gavsdm-cta-button span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(4,21,45,.13); font-size:18px; } .gavsdm-primary-cta strong, .gavsdm-cta-button strong{ font-size:16px; } /* ========================================================= SECTION 02 — FRAMEWORK ========================================================= */ .gavsdm-framework{ padding:100px 0 105px; background: linear-gradient( 180deg, #ffffff 0%, #f5f8fb 100% ); } .gavsdm-framework-heading{ max-width:900px; margin:0 auto 55px; text-align:center; } .gavsdm-section-label{ display:inline-flex; align-items:center; gap:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.45px; line-height:1.5; } .gavsdm-section-label span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:15px; } .gavsdm-framework-heading h2{ margin:18px 0 16px; color:#061d3d; font-size:clamp(38px,4.7vw,58px); line-height:1.06; letter-spacing:-1.8px; } .gavsdm-framework-heading h2 strong{ color:#b97800; } .gavsdm-framework-heading > p{ max-width:790px; margin:auto; color:#536274; font-size:16px; line-height:1.8; } /* ========================================================= FRAMEWORK GRID ========================================================= */ .gavsdm-framework-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(9,47,98,.16); border-left:1px solid rgba(9,47,98,.16); } .gavsdm-factor{ display:grid; grid-template-columns:65px minmax(0,1fr); gap:22px; min-height:245px; padding:30px; border-right:1px solid rgba(9,47,98,.16); border-bottom:1px solid rgba(9,47,98,.16); background:#ffffff; transition: background .25s ease, transform .25s ease; } .gavsdm-factor:hover{ background: linear-gradient( 135deg, #ffffff, #f5f8fb ); } .gavsdm-factor-number{ color:#b97800; font-size:25px; font-weight:900; } .gavsdm-factor span{ display:block; margin-bottom:7px; color:#7a8796; font-size:15px; font-weight:850; letter-spacing:1.15px; } .gavsdm-factor h3{ margin:0 0 10px; color:#061d3d; font-size:25px; line-height:1.25; } .gavsdm-factor h3 strong{ color:#b97800; } .gavsdm-factor p{ margin:0; color:#586779; font-size:15px; line-height:1.75; } .gavsdm-factor p strong{ color:#092f62; font-weight:750; } /* ========================================================= SECTION 03 — LOCALITY ========================================================= */ .gavsdm-locality{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 12% 15%, rgba(240,180,41,.09), transparent 26% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gavsdm-locality-pattern{ position:absolute; inset:0; pointer-events:none; } .gavsdm-locality-pattern:before{ content:""; position:absolute; right:-300px; top:-250px; width:650px; height:650px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gavsdm-locality-pattern:after{ content:""; position:absolute; left:7%; top:0; width:1px; height:100%; background: linear-gradient( 180deg, transparent, rgba(240,180,41,.13), transparent ); } .gavsdm-locality .container{ position:relative; z-index:2; } .gavsdm-section-label.light{ color:#f0b429; } .gavsdm-section-label.light span{ color:#f0b429; border-color:rgba(240,180,41,.48); } .gavsdm-locality-header{ max-width:900px; margin:0 auto 50px; text-align:center; } .gavsdm-locality-header h2{ margin:18px 0 16px; color:#ffffff; font-size:clamp(37px,4.6vw,58px); line-height:1.07; letter-spacing:-1.7px; } .gavsdm-locality-header h2 strong{ color:#f0b429; } .gavsdm-locality-header p{ max-width:780px; margin:auto; color:#d1dce7; font-size:16px; line-height:1.8; } /* ========================================================= LOCALITY GRID ========================================================= */ .gavsdm-locality-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .gavsdm-locality-card{ min-height:250px; padding:27px; border:1px solid rgba(240,180,41,.19); border-radius:10px; background: linear-gradient( 135deg, rgba(255,255,255,.065), rgba(255,255,255,.018) ); transition: border-color .25s ease, transform .25s ease, background .25s ease; } .gavsdm-locality-card:hover{ border-color:rgba(240,180,41,.46); transform:translateY(-3px); background: linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.025) ); } .gavsdm-locality-card-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.10); } .gavsdm-locality-card-top span{ color:#f0b429; font-size:20px; font-weight:900; } .gavsdm-locality-card-top b{ color:#aebdce; font-size:15px; font-weight:800; letter-spacing:1px; } .gavsdm-locality-card h3{ margin:21px 0 10px; color:#ffffff; font-size:25px; line-height:1.3; } .gavsdm-locality-card h3 strong{ color:#f0b429; } .gavsdm-locality-card p{ margin:0; color:#cbd7e3; font-size:15px; line-height:1.75; } .gavsdm-locality-card p strong{ color:#ffffff; font-weight:750; } /* ========================================================= QUESTION BAND ========================================================= */ .gavsdm-question-band{ display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:center; margin-top:55px; padding:30px; border-top:1px solid rgba(240,180,41,.20); border-bottom:1px solid rgba(240,180,41,.20); } .gavsdm-question-band > div:first-child > span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.15px; } .gavsdm-question-band h3{ margin:0; color:#ffffff; font-size:26px; line-height:1.35; } .gavsdm-question-band h3 strong{ color:#f0b429; } .gavsdm-question-points{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .gavsdm-question-points span{ display:flex; align-items:center; gap:9px; color:#d2deea; font-size:15px; } .gavsdm-question-points b{ color:#f0b429; font-size:15px; } /* ========================================================= FINAL CTA ========================================================= */ .gavsdm-final-cta{ display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:55px; padding:32px 35px; border-radius:12px; background: linear-gradient( 135deg, #ffffff, #f4f7fa ); box-shadow: 0 20px 45px rgba(0,0,0,.18); } .gavsdm-final-copy > span{ display:block; margin-bottom:7px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gavsdm-final-copy h3{ margin:0 0 8px; color:#061d3d; font-size:28px; line-height:1.3; } .gavsdm-final-copy h3 strong{ color:#b97800; } .gavsdm-final-copy p{ max-width:700px; margin:0; color:#586779; font-size:15px; line-height:1.65; } .gavsdm-final-copy p strong{ color:#092f62; } /* ========================================================= FINAL ACTIONS ========================================================= */ .gavsdm-final-actions{ display:flex; align-items:center; gap:10px; flex:none; } .gavsdm-phone-button{ display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 15px; border:1px solid rgba(9,47,98,.25); border-radius:8px; color:#092f62; background:#ffffff; } .gavsdm-phone-button:hover{ color:#092f62; border-color:#b97800; } .gavsdm-phone-button span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:#b97800; background:rgba(185,120,0,.10); font-size:17px; } .gavsdm-phone-button strong{ display:block; font-size:15px; } .gavsdm-phone-button small{ display:block; margin-top:2px; color:#718092; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .gavsdm-hero h1{ font-size:65px; } .gavsdm-framework-grid{ grid-template-columns:repeat(2,1fr); } .gavsdm-locality-card{ min-height:270px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavsdm-hero{ padding:85px 0 75px; } .gavsdm-hero h1{ font-size:55px; } .gavsdm-framework{ padding:80px 0; } .gavsdm-locality{ padding:80px 0; } .gavsdm-question-band{ grid-template-columns:1fr; gap:25px; } .gavsdm-final-cta{ flex-direction:column; align-items:flex-start; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavsdm-hero{ padding:65px 0 60px; } .gavsdm-kicker{ flex-wrap:wrap; font-size:15px; letter-spacing:1px; } .gavsdm-hero h1{ font-size:41px; letter-spacing:-1.5px; } .gavsdm-hero-lead{ font-size:16px; line-height:1.75; } .gavsdm-hero-location-strip{ grid-template-columns:1fr; } .gavsdm-hero-location-strip div{ align-items:flex-start; border-right:0; border-bottom:1px solid rgba(255,255,255,.11); } .gavsdm-hero-location-strip div:last-child{ border-bottom:0; } .gavsdm-hero-bottom{ flex-direction:column; align-items:stretch; gap:20px; } .gavsdm-primary-cta{ width:100%; } .gavsdm-framework{ padding:65px 0; } .gavsdm-framework-heading h2{ font-size:36px; } .gavsdm-framework-heading > p{ font-size:15px; } .gavsdm-framework-grid{ grid-template-columns:1fr; } .gavsdm-factor{ min-height:0; padding:25px 20px; } .gavsdm-factor h3{ font-size:22px; } .gavsdm-locality{ padding:65px 0; } .gavsdm-locality-header h2{ font-size:36px; } .gavsdm-locality-header p{ font-size:15px; } .gavsdm-locality-grid{ grid-template-columns:1fr; } .gavsdm-locality-card{ min-height:0; } .gavsdm-question-band{ padding:24px 20px; } .gavsdm-question-band h3{ font-size:23px; } .gavsdm-question-points{ grid-template-columns:1fr; } .gavsdm-final-cta{ padding:25px 20px; } .gavsdm-final-copy h3{ font-size:24px; } .gavsdm-final-actions{ width:100%; flex-direction:column; align-items:stretch; } .gavsdm-cta-button, .gavsdm-phone-button{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavsdm-hero h1{ font-size:35px; } .gavsdm-framework-heading h2{ font-size:32px; } .gavsdm-locality-header h2{ font-size:32px; } .gavsdm-factor{ grid-template-columns:47px minmax(0,1fr); gap:13px; } .gavsdm-factor-number{ font-size:20px; } .gavsdm-factor h3{ font-size:20px; } .gavsdm-locality-card h3{ font-size:21px; } } /* ========================================================= WEST DELHI PROPERTY VALUATION GOVERNMENT APPROVED VALUERS DELHI NCR UNIQUE NAMESPACE: gwdpv- ROYAL BRAND PALETTE: #04152d #061d3d #092f62 #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= BASE ========================================================= */ .gwdpv-hero, .gwdpv-framework, .gwdpv-purpose{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gwdpv-hero *, .gwdpv-framework *, .gwdpv-purpose *{ box-sizing:border-box; } .gwdpv-hero a, .gwdpv-framework a, .gwdpv-purpose a{ text-decoration:none; } /* ========================================================= SECTION 01 HERO ========================================================= */ .gwdpv-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 82% 17%, rgba(240,180,41,.15), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gwdpv-hero-grid{ position:absolute; inset:0; opacity:.75; pointer-events:none; background: linear-gradient( 90deg, transparent 0%, transparent 9%, rgba(240,180,41,.045) 9.05%, transparent 9.1%, transparent 91%, rgba(240,180,41,.045) 91.05%, transparent 91.1% ); } .gwdpv-hero-grid:before{ content:""; position:absolute; left:-220px; top:-300px; width:700px; height:700px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .gwdpv-hero-orbit{ position:absolute; right:-280px; top:-330px; width:760px; height:760px; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .gwdpv-hero-orbit:before{ content:""; position:absolute; inset:80px; border:1px solid rgba(240,180,41,.07); border-radius:50%; } .gwdpv-hero-inner{ position:relative; z-index:2; max-width:1120px; margin:auto; } .gwdpv-hero-kicker{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.55px; line-height:1.5; } .gwdpv-hero-kicker span{ width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gwdpv-hero-kicker i{ font-style:normal; opacity:.55; } .gwdpv-hero h1{ max-width:1000px; margin:0; color:#ffffff; font-size:clamp(50px,6.7vw,82px); font-weight:750; line-height:.99; letter-spacing:-3.5px; } .gwdpv-hero h1 strong{ display:block; color:#f0b429; font-weight:750; } .gwdpv-hero h1 small{ display:block; max-width:760px; margin-top:23px; color:#dce6ef; font-size:clamp(23px,2.7vw,34px); font-weight:500; line-height:1.25; letter-spacing:-.7px; } .gwdpv-hero-lead{ max-width:900px; margin:37px 0 0; color:#d4dfeb; font-size:18px; line-height:1.85; } .gwdpv-hero-lead strong{ color:#ffffff; font-weight:750; } .gwdpv-hero-divider{ width:100%; height:1px; margin:38px 0 27px; background: linear-gradient( 90deg, #b97800, rgba(240,180,41,.20), transparent ); } .gwdpv-hero-bottom{ display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:40px; align-items:center; } .gwdpv-hero-statement span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .gwdpv-hero-statement p{ max-width:750px; margin:0; color:#ffffff; font-size:20px; line-height:1.55; } .gwdpv-hero-statement p strong{ color:#f0b429; } .gwdpv-hero-code{ display:flex; align-items:center; gap:12px; padding-left:18px; border-left:2px solid #b97800; } .gwdpv-hero-code strong{ color:#f0b429; font-size:39px; font-weight:900; line-height:1; } .gwdpv-hero-code span{ color:#c7d5e2; font-size:15px; line-height:1.4; font-weight:700; } .gwdpv-hero-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:31px; } .gwdpv-hero-tags span{ padding:9px 16px; border:1px solid rgba(240,180,41,.30); border-radius:50px; color:#f0b429; background:rgba(255,255,255,.025); font-size:15px; font-weight:700; } /* ========================================================= SECTION 02 FRAMEWORK ========================================================= */ .gwdpv-framework{ padding:105px 0 95px; background: linear-gradient( 180deg, #f9fbfd 0%, #eef3f8 100% ); color:#061d3d; } .gwdpv-framework-decoration{ position:absolute; width:650px; height:650px; right:-370px; top:120px; border:1px solid rgba(185,120,0,.08); border-radius:50%; } .gwdpv-framework-heading{ position:relative; z-index:2; max-width:920px; margin:0 auto 50px; text-align:center; } .gwdpv-section-label{ display:inline-flex; align-items:center; gap:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .gwdpv-section-label span{ display:flex; align-items:center; justify-content:center; width:37px; height:37px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:15px; } .gwdpv-framework-heading h2{ margin:20px 0 17px; color:#061d3d; font-size:clamp(39px,4.7vw,59px); line-height:1.08; letter-spacing:-1.7px; } .gwdpv-framework-heading h2 strong{ color:#b97800; } .gwdpv-framework-heading > p{ max-width:800px; margin:auto; color:#536276; font-size:16px; line-height:1.8; } .gwdpv-framework-heading p strong{ color:#092f62; } /* ========================================================= LOCALITY MATRIX ========================================================= */ .gwdpv-locality-matrix{ position:relative; z-index:2; border-top:1px solid rgba(9,47,98,.16); } .gwdpv-locality{ display:grid; grid-template-columns:72px minmax(0,1fr) 48px; gap:25px; align-items:center; min-height:175px; padding:27px 0; border-bottom:1px solid rgba(9,47,98,.14); transition: background .25s ease, padding .25s ease; } .gwdpv-locality:hover{ padding-left:18px; padding-right:18px; background: linear-gradient( 90deg, rgba(185,120,0,.055), transparent 80% ); } .gwdpv-locality-no{ align-self:start; padding-top:3px; color:#b97800; font-size:24px; font-weight:900; } .gwdpv-locality-content > span{ display:block; margin-bottom:6px; color:#7b8999; font-size:15px; font-weight:850; letter-spacing:1.1px; line-height:1.4; } .gwdpv-locality-content h3{ margin:0 0 7px; color:#061d3d; font-size:26px; line-height:1.25; } .gwdpv-locality-content p{ max-width:880px; margin:0; color:#536276; font-size:15px; line-height:1.7; } .gwdpv-locality-content p strong{ color:#092f62; } .gwdpv-locality-arrow{ display:flex; align-items:center; justify-content:center; width:43px; height:43px; border:1px solid rgba(185,120,0,.35); border-radius:50%; color:#b97800; font-size:20px; transition: background .25s ease, color .25s ease; } .gwdpv-locality:hover .gwdpv-locality-arrow{ color:#ffffff; background:#b97800; } /* ========================================================= VALUATION PRINCIPLE ========================================================= */ .gwdpv-principle{ position:relative; z-index:2; display:flex; align-items:center; gap:18px; margin-top:42px; padding:23px 25px; border-left:3px solid #b97800; border-radius:0 10px 10px 0; background:#ffffff; box-shadow: 0 14px 32px rgba(6,29,61,.07); } .gwdpv-principle-mark{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:none; border:1px solid rgba(185,120,0,.38); border-radius:50%; color:#b97800; font-size:24px; font-weight:700; } .gwdpv-principle span{ display:block; margin-bottom:5px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .gwdpv-principle strong{ color:#092f62; font-size:17px; line-height:1.5; } .gwdpv-principle em{ color:#b97800; font-style:normal; } /* ========================================================= SECTION 03 PURPOSE ========================================================= */ .gwdpv-purpose{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 85% 15%, rgba(240,180,41,.12), transparent 28% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gwdpv-purpose-pattern{ position:absolute; width:650px; height:650px; right:-370px; bottom:-330px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gwdpv-purpose-heading{ position:relative; z-index:2; max-width:900px; margin-bottom:48px; } .gwdpv-section-label.light{ color:#f0b429; } .gwdpv-section-label.light span{ border-color:rgba(240,180,41,.48); color:#f0b429; } .gwdpv-purpose-heading h2{ max-width:820px; margin:20px 0 17px; color:#ffffff; font-size:clamp(38px,4.6vw,58px); line-height:1.08; letter-spacing:-1.5px; } .gwdpv-purpose-heading h2 strong{ color:#f0b429; } .gwdpv-purpose-heading p{ margin:0; color:#cedae6; font-size:16px; line-height:1.8; } /* ========================================================= PURPOSE GRID ========================================================= */ .gwdpv-purpose-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.13); border-left:1px solid rgba(255,255,255,.13); } .gwdpv-purpose-card{ display:grid; grid-template-columns:52px 1fr; gap:17px; min-height:205px; padding:25px; border-right:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); transition: background .25s ease; } .gwdpv-purpose-card:hover{ background:rgba(255,255,255,.035); } .gwdpv-purpose-number{ color:#b97800; font-size:21px; font-weight:900; } .gwdpv-purpose-card h3{ margin:0 0 9px; color:#ffffff; font-size:23px; line-height:1.3; } .gwdpv-purpose-card p{ margin:0; color:#cbd7e3; font-size:15px; line-height:1.72; } .gwdpv-purpose-card p strong{ color:#f0b429; } /* ========================================================= FINAL CTA ========================================================= */ .gwdpv-final-cta{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:52px; padding:32px 35px; border:1px solid rgba(240,180,41,.28); border-radius:13px; background: linear-gradient( 110deg, rgba(255,255,255,.06), rgba(255,255,255,.025) ); box-shadow: 0 20px 45px rgba(0,0,0,.20); } .gwdpv-final-copy > span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gwdpv-final-copy h3{ margin:0 0 8px; color:#ffffff; font-size:29px; line-height:1.3; } .gwdpv-final-copy h3 strong{ color:#f0b429; } .gwdpv-final-copy p{ max-width:680px; margin:0; color:#cbd7e3; font-size:15px; line-height:1.7; } /* ========================================================= CTA ACTIONS ========================================================= */ .gwdpv-final-actions{ display:flex; flex-direction:column; gap:10px; min-width:245px; flex:none; } .gwdpv-main-button, .gwdpv-phone-button{ display:flex; align-items:center; gap:12px; width:100%; min-height:61px; padding:10px 17px; border-radius:8px; } .gwdpv-main-button{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 28px rgba(0,0,0,.24); } .gwdpv-main-button:hover{ color:#04152d; } .gwdpv-phone-button{ border:1px solid rgba(240,180,41,.48); color:#ffffff; background:rgba(255,255,255,.025); } .gwdpv-phone-button:hover{ color:#ffffff; border-color:#f0b429; } .gwdpv-main-button > span, .gwdpv-phone-button > span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border-radius:50%; font-size:18px; font-weight:800; } .gwdpv-main-button > span{ background:rgba(4,21,45,.12); } .gwdpv-phone-button > span{ color:#f0b429; background:rgba(240,180,41,.10); } .gwdpv-main-button strong, .gwdpv-phone-button strong{ display:block; font-size:16px; line-height:1.3; } .gwdpv-phone-button small{ display:block; margin-top:2px; color:#c5d2df; font-size:15px; } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gwdpv-hero{ padding:80px 0 70px; } .gwdpv-hero h1{ font-size:57px; } .gwdpv-framework, .gwdpv-purpose{ padding:80px 0; } .gwdpv-locality{ grid-template-columns:58px minmax(0,1fr) 45px; gap:18px; } .gwdpv-purpose-grid{ grid-template-columns:1fr; } .gwdpv-final-cta{ align-items:flex-start; flex-direction:column; } .gwdpv-final-actions{ width:100%; max-width:330px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gwdpv-hero{ padding:62px 0 55px; } .gwdpv-hero-kicker{ font-size:15px; letter-spacing:1px; } .gwdpv-hero h1{ font-size:40px; line-height:1.03; letter-spacing:-1.7px; } .gwdpv-hero h1 small{ font-size:23px; line-height:1.3; } .gwdpv-hero-lead{ margin-top:27px; font-size:15px; line-height:1.75; } .gwdpv-hero-bottom{ grid-template-columns:1fr; gap:25px; } .gwdpv-hero-statement p{ font-size:18px; } .gwdpv-hero-code{ width:max-content; } .gwdpv-framework-heading h2, .gwdpv-purpose-heading h2{ font-size:36px; } .gwdpv-framework-heading > p, .gwdpv-purpose-heading p{ font-size:15px; } .gwdpv-locality{ grid-template-columns:43px minmax(0,1fr); gap:14px; min-height:0; padding:25px 0; } .gwdpv-locality:hover{ padding-left:10px; padding-right:10px; } .gwdpv-locality-no{ font-size:19px; } .gwdpv-locality-content > span{ font-size:15px; } .gwdpv-locality-content h3{ font-size:21px; } .gwdpv-locality-content p{ font-size:15px; line-height:1.7; } .gwdpv-locality-arrow{ display:none; } .gwdpv-principle{ align-items:flex-start; padding:19px; } .gwdpv-principle strong{ font-size:15px; } .gwdpv-purpose-card{ min-height:0; padding:22px 18px; } .gwdpv-purpose-card h3{ font-size:21px; } .gwdpv-purpose-card p{ font-size:15px; } .gwdpv-final-cta{ padding:25px 19px; } .gwdpv-final-copy h3{ font-size:25px; } .gwdpv-final-actions{ max-width:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gwdpv-hero h1{ font-size:35px; } .gwdpv-hero h1 small{ font-size:21px; } .gwdpv-framework-heading h2, .gwdpv-purpose-heading h2{ font-size:31px; } .gwdpv-purpose-card{ grid-template-columns:42px 1fr; gap:11px; } .gwdpv-purpose-number{ font-size:19px; } .gwdpv-final-copy h3{ font-size:23px; } } /* ========================================================= NORTH DELHI PROPERTY VALUATION GOVERNMENT APPROVED VALUERS DELHI NCR UNIQUE NAMESPACE: ndpv- ROYAL BRAND PALETTE #04152d #061d3d #092f62 #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .ndpv-hero, .ndpv-landscape, .ndpv-cta{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .ndpv-hero *, .ndpv-landscape *, .ndpv-cta *{ box-sizing:border-box; } .ndpv-hero a, .ndpv-landscape a, .ndpv-cta a{ text-decoration:none; } /* ========================================================= SECTION 01 HERO ========================================================= */ .ndpv-hero{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 88% 18%, rgba(240,180,41,.13), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 53%, #092f62 100% ); } .ndpv-hero-grid{ position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, transparent 0%, transparent 7%, rgba(240,180,41,.055) 7.05%, transparent 7.1%, transparent 93%, rgba(240,180,41,.055) 93.05%, transparent 93.1% ); } .ndpv-hero-grid:before{ content:""; position:absolute; width:650px; height:650px; right:-350px; top:-310px; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .ndpv-hero-grid:after{ content:""; position:absolute; width:420px; height:420px; right:-230px; top:-195px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .ndpv-hero-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(390px,.65fr); gap:70px; align-items:center; } /* ========================================================= HERO CONTENT ========================================================= */ .ndpv-hero-content{ max-width:780px; } .ndpv-kicker{ display:flex; align-items:center; gap:12px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.6px; } .ndpv-kicker span{ width:43px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .ndpv-hero h1{ margin:0; color:#ffffff; font-size:clamp(47px,6vw,76px); font-weight:750; line-height:1.02; letter-spacing:-3px; } .ndpv-hero h1 strong{ display:block; color:#f0b429; font-weight:750; } .ndpv-hero h1 small{ display:block; max-width:680px; margin-top:19px; color:#dce5ee; font-size:23px; font-weight:450; line-height:1.4; letter-spacing:-.4px; } .ndpv-hero-lead{ max-width:760px; margin:36px 0 19px; color:#f0f4f8 !important; font-size:18px !important; line-height:1.8 !important; } .ndpv-hero-content p{ max-width:760px; margin:0 0 24px; color:#cbd8e5; font-size:16px; line-height:1.8; } .ndpv-hero-content strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO TAGS ========================================================= */ .ndpv-hero-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; } .ndpv-hero-tags span{ padding:9px 15px; border:1px solid rgba(240,180,41,.34); border-radius:50px; color:#f0b429; background:rgba(255,255,255,.025); font-size:15px; font-weight:700; } /* ========================================================= HERO RIGHT PANEL ========================================================= */ .ndpv-hero-panel{ position:relative; padding:31px; border:1px solid rgba(240,180,41,.30); border-radius:13px; background: linear-gradient( 145deg, rgba(9,47,98,.92), rgba(4,21,45,.96) ); box-shadow: 0 25px 55px rgba(0,0,0,.28); } .ndpv-hero-panel:before{ content:""; position:absolute; top:0; left:31px; width:80px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .ndpv-panel-number{ color:#b97800; font-size:42px; font-weight:900; line-height:1; } .ndpv-panel-label{ margin:14px 0 13px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .ndpv-hero-panel h2{ margin:0 0 25px; color:#ffffff; font-size:31px; line-height:1.25; } .ndpv-hero-panel h2 strong{ color:#f0b429; } .ndpv-panel-list{ border-top:1px solid rgba(255,255,255,.12); } .ndpv-panel-list > div{ display:grid; grid-template-columns:35px 1fr; gap:9px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.09); } .ndpv-panel-list span{ color:#b97800; font-size:15px; font-weight:900; } .ndpv-panel-list strong{ color:#ffffff; font-size:16px; } .ndpv-panel-list p{ grid-column:2; margin:2px 0 0; color:#bdcad7; font-size:15px; line-height:1.55; } .ndpv-panel-list p strong{ color:#f0b429; } .ndpv-panel-bottom{ margin-top:23px; padding-top:19px; border-top:1px solid rgba(240,180,41,.17); } .ndpv-panel-bottom span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:800; letter-spacing:1px; } .ndpv-panel-bottom strong{ color:#dce5ed; font-size:15px; font-weight:500; } /* ========================================================= SECTION 02 LANDSCAPE ========================================================= */ .ndpv-landscape{ padding:100px 0 95px; background: linear-gradient( 180deg, #f9fbfd 0%, #eef3f8 100% ); } .ndpv-landscape-heading{ max-width:900px; margin-bottom:48px; } .ndpv-section-index{ display:flex; align-items:center; gap:13px; margin-bottom:19px; } .ndpv-section-index span{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; border:1px solid rgba(185,120,0,.50); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .ndpv-section-index strong{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .ndpv-landscape-heading h2{ margin:0 0 17px; color:#061d3d; font-size:clamp(40px,4.8vw,60px); line-height:1.06; letter-spacing:-1.8px; } .ndpv-landscape-heading h2 strong{ color:#b97800; } .ndpv-landscape-heading > p{ max-width:820px; margin:0; color:#526276; font-size:16px; line-height:1.8; } /* ========================================================= LOCALITY GRID ========================================================= */ .ndpv-locality-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(9,47,98,.16); border-left:1px solid rgba(9,47,98,.16); } .ndpv-locality-card{ position:relative; min-height:300px; padding:27px; border-right:1px solid rgba(9,47,98,.16); border-bottom:1px solid rgba(9,47,98,.16); background:rgba(255,255,255,.50); transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } .ndpv-locality-card:hover{ z-index:2; background:#ffffff; transform:translateY(-4px); box-shadow: 0 17px 35px rgba(6,29,61,.10); } .ndpv-locality-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; } .ndpv-locality-top span{ color:#7a8796; font-size:15px; font-weight:850; letter-spacing:1.15px; } .ndpv-locality-top b{ color:#b97800; font-size:17px; } .ndpv-locality-card h3{ margin:0 0 14px; color:#061d3d; font-size:24px; line-height:1.25; } .ndpv-locality-card h3 strong{ color:#b97800; } .ndpv-locality-card p{ margin:0; color:#586779; font-size:15px; line-height:1.75; } .ndpv-locality-card p strong{ color:#092f62; font-weight:750; } .ndpv-locality-keyword{ position:absolute; right:27px; bottom:25px; left:27px; padding-top:13px; border-top:1px solid rgba(9,47,98,.10); color:#092f62; font-size:15px; font-weight:750; } /* ========================================================= VALUATION PRINCIPLE ========================================================= */ .ndpv-principle{ display:flex; align-items:center; gap:21px; margin-top:45px; padding:24px 27px; border-left:3px solid #b97800; border-radius:0 10px 10px 0; background:#ffffff; box-shadow: 0 12px 30px rgba(6,29,61,.07); } .ndpv-principle-mark{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex:none; border-radius:50%; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); font-size:25px; font-weight:900; } .ndpv-principle span{ display:block; margin-bottom:4px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1px; } .ndpv-principle h3{ margin:0; color:#061d3d; font-size:21px; line-height:1.4; } .ndpv-principle h3 strong{ color:#b97800; } /* ========================================================= SECTION 03 CTA ========================================================= */ .ndpv-cta{ padding:90px 0; color:#ffffff; background: radial-gradient( circle at 85% 50%, rgba(240,180,41,.12), transparent 27% ), linear-gradient( 125deg, #04152d, #061d3d 55%, #092f62 ); } .ndpv-cta-pattern{ position:absolute; width:650px; height:650px; right:-350px; top:-250px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .ndpv-cta-pattern:after{ content:""; position:absolute; width:420px; height:420px; top:110px; left:110px; border:1px solid rgba(240,180,41,.07); border-radius:50%; } .ndpv-cta-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr); gap:80px; align-items:center; } .ndpv-section-index-light span{ border-color:rgba(240,180,41,.50); color:#f0b429; } .ndpv-section-index-light strong{ color:#f0b429; } .ndpv-cta-copy h2{ max-width:720px; margin:0 0 20px; color:#ffffff; font-size:clamp(42px,5vw,65px); line-height:1.04; letter-spacing:-2px; } .ndpv-cta-copy h2 strong{ color:#f0b429; } .ndpv-cta-copy > p{ max-width:760px; margin:0; color:#d0dce7; font-size:17px; line-height:1.8; } .ndpv-cta-copy > p strong{ color:#ffffff; } /* ========================================================= CTA POINTS ========================================================= */ .ndpv-cta-points{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; max-width:700px; margin-top:30px; } .ndpv-cta-points span{ color:#d9e3ed; font-size:15px; line-height:1.5; } .ndpv-cta-points span::first-letter{ color:#f0b429; } /* ========================================================= CTA ACTION PANEL ========================================================= */ .ndpv-cta-action{ position:relative; padding:31px; border:1px solid rgba(240,180,41,.30); border-radius:13px; background: linear-gradient( 145deg, rgba(9,47,98,.88), rgba(4,21,45,.96) ); box-shadow: 0 25px 55px rgba(0,0,0,.27); } .ndpv-cta-action:before{ content:""; position:absolute; top:0; left:31px; width:75px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .ndpv-cta-action-label{ margin-bottom:12px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.4px; } .ndpv-cta-action h3{ margin:0 0 24px; color:#ffffff; font-size:28px; line-height:1.3; } .ndpv-cta-action h3 strong{ color:#f0b429; } /* ========================================================= PRIMARY CTA ========================================================= */ .ndpv-primary-button{ display:flex; align-items:center; gap:13px; width:100%; min-height:68px; margin-bottom:11px; padding:10px 16px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 14px 30px rgba(0,0,0,.25); } .ndpv-primary-button:hover{ color:#04152d; } .ndpv-primary-button > span{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; flex:none; border-radius:50%; background:rgba(4,21,45,.12); font-size:19px; } .ndpv-primary-button strong{ display:block; font-size:16px; line-height:1.3; } .ndpv-primary-button small{ display:block; margin-top:3px; font-size:15px; opacity:.72; } /* ========================================================= PHONE CTA ========================================================= */ .ndpv-phone-button{ display:flex; align-items:center; gap:13px; width:100%; min-height:63px; padding:10px 16px; border:1px solid rgba(240,180,41,.48); border-radius:8px; color:#ffffff; background:rgba(255,255,255,.035); } .ndpv-phone-button:hover{ color:#ffffff; border-color:#f0b429; } .ndpv-phone-button > span{ display:flex; align-items:center; justify-content:center; width:37px; height:37px; flex:none; border-radius:50%; color:#f0b429; background:rgba(240,180,41,.11); } .ndpv-phone-button strong{ display:block; font-size:16px; } .ndpv-phone-button small{ display:block; margin-top:3px; color:#bdc9d6; font-size:15px; } /* ========================================================= OFFICE ========================================================= */ .ndpv-office{ margin-top:23px; padding-top:19px; border-top:1px solid rgba(255,255,255,.11); } .ndpv-office span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .ndpv-office strong{ display:block; color:#d7e1eb; font-size:15px; line-height:1.55; font-weight:500; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .ndpv-hero-layout{ grid-template-columns:minmax(0,1fr) minmax(350px,.7fr); gap:45px; } .ndpv-locality-grid{ grid-template-columns:repeat(2,1fr); } .ndpv-cta-layout{ gap:45px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .ndpv-hero{ padding:80px 0 70px; } .ndpv-hero-layout{ grid-template-columns:1fr; gap:45px; } .ndpv-hero-content{ max-width:850px; } .ndpv-hero-panel{ max-width:700px; } .ndpv-landscape{ padding:75px 0; } .ndpv-cta-layout{ grid-template-columns:1fr; gap:45px; } .ndpv-cta-action{ max-width:650px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .ndpv-hero{ padding:62px 0 55px; } .ndpv-kicker{ font-size:15px; letter-spacing:1px; } .ndpv-hero h1{ font-size:41px; letter-spacing:-1.7px; } .ndpv-hero h1 small{ font-size:21px; } .ndpv-hero-lead{ font-size:16px !important; } .ndpv-hero-content p{ font-size:15px; line-height:1.75; } .ndpv-hero-panel{ padding:24px 20px; } .ndpv-hero-panel h2{ font-size:27px; } .ndpv-landscape{ padding:65px 0; } .ndpv-landscape-heading h2{ font-size:38px; } .ndpv-locality-grid{ grid-template-columns:1fr; } .ndpv-locality-card{ min-height:280px; } .ndpv-principle{ align-items:flex-start; padding:20px; } .ndpv-principle h3{ font-size:19px; } .ndpv-cta{ padding:65px 0; } .ndpv-cta-copy h2{ font-size:39px; letter-spacing:-1.3px; } .ndpv-cta-copy > p{ font-size:15px; } .ndpv-cta-points{ grid-template-columns:1fr; } .ndpv-cta-action{ padding:25px 20px; } .ndpv-cta-action h3{ font-size:25px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .ndpv-hero h1{ font-size:35px; } .ndpv-hero h1 small{ font-size:20px; } .ndpv-hero-tags span{ padding:8px 12px; } .ndpv-landscape-heading h2{ font-size:32px; } .ndpv-locality-card{ min-height:300px; padding:23px; } .ndpv-locality-card h3{ font-size:22px; } .ndpv-cta-copy h2{ font-size:34px; } } /* ========================================================= EAST DELHI PROPERTY VALUATION GOVERNMENT APPROVED VALUERS DELHI NCR UNIQUE NAMESPACE: gavedeast- BRAND COLOURS: #04152d #061d3d #092f62 #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavedeast-hero, .gavedeast-landscape, .gavedeast-cta{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavedeast-hero *, .gavedeast-landscape *, .gavedeast-cta *{ box-sizing:border-box; } .gavedeast-hero a, .gavedeast-landscape a, .gavedeast-cta a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .gavedeast-hero{ padding:105px 0 88px; color:#ffffff; background: radial-gradient( circle at 85% 12%, rgba(240,180,41,.14), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gavedeast-hero-grid{ position:absolute; inset:0; pointer-events:none; } .gavedeast-hero-grid:before{ content:""; position:absolute; width:680px; height:680px; right:-370px; top:-290px; border:1px solid rgba(240,180,41,.13); border-radius:50%; } .gavedeast-hero-grid:after{ content:""; position:absolute; width:440px; height:440px; right:-235px; top:-165px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .gavedeast-hero-inner{ position:relative; z-index:2; max-width:1120px; margin:auto; text-align:center; } .gavedeast-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.55px; line-height:1.5; } .gavedeast-kicker span{ width:40px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavedeast-hero h1{ max-width:1050px; margin:0 auto; color:#ffffff; font-size: clamp( 46px, 6.2vw, 78px ); font-weight:750; line-height:1.02; letter-spacing:-3px; } .gavedeast-hero h1 strong{ display:block; margin-top:13px; color:#f0b429; font-weight:750; font-size: clamp( 26px, 3.4vw, 43px ); line-height:1.2; letter-spacing:-1.2px; } .gavedeast-hero-lead{ max-width:900px; margin:30px auto 0; color:#dce6ef; font-size:18px; line-height:1.8; } .gavedeast-hero-lead strong{ color:#ffffff; font-weight:750; } .gavedeast-hero-rule{ width:100%; max-width:920px; height:1px; margin:38px auto 0; background: linear-gradient( 90deg, transparent, rgba(240,180,41,.35), transparent ); } /* ========================================================= HERO BOTTOM ========================================================= */ .gavedeast-hero-bottom{ display:grid; grid-template-columns: minmax(0,1fr) 130px; gap:40px; max-width:920px; margin:30px auto 0; text-align:left; align-items:center; } .gavedeast-hero-statement{ padding-left:20px; border-left:3px solid #b97800; } .gavedeast-hero-statement span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gavedeast-hero-statement p{ margin:0; color:#d1dce7; font-size:16px; line-height:1.75; } .gavedeast-hero-statement p strong{ color:#ffffff; } .gavedeast-hero-mark{ display:flex; align-items:center; justify-content:center; gap:10px; height:105px; border: 1px solid rgba(240,180,41,.35); background: rgba(255,255,255,.035); border-radius:10px; } .gavedeast-hero-mark strong{ color:#f0b429; font-size:55px; font-weight:900; line-height:1; } .gavedeast-hero-mark span{ color:#dce6ef; font-size:15px; font-weight:800; line-height:1.3; letter-spacing:1px; } /* ========================================================= HERO TAGS ========================================================= */ .gavedeast-hero-tags{ display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:30px; } .gavedeast-hero-tags span{ padding:9px 15px; border: 1px solid rgba(240,180,41,.30); border-radius:50px; color:#f0b429; background: rgba(255,255,255,.025); font-size:15px; font-weight:750; } /* ========================================================= SECTION 02 — LANDSCAPE ========================================================= */ .gavedeast-landscape{ padding:95px 0 100px; background: linear-gradient( 180deg, #f9fbfd 0%, #eef3f8 100% ); } .gavedeast-landscape-head{ display:grid; grid-template-columns: minmax(0,1fr) minmax(300px,.75fr); gap:70px; align-items:end; margin-bottom:48px; } .gavedeast-section-label{ display:inline-flex; align-items:center; gap:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.45px; line-height:1.5; } .gavedeast-section-label:before{ content:""; width:34px; height:2px; background:#b97800; } .gavedeast-landscape-head h2{ max-width:700px; margin:16px 0 0; color:#061d3d; font-size: clamp( 38px, 4.6vw, 58px ); line-height:1.06; letter-spacing:-1.7px; } .gavedeast-landscape-head h2 strong{ color:#b97800; } .gavedeast-landscape-head > p{ margin:0; color:#566577; font-size:16px; line-height:1.8; } /* ========================================================= LOCALITY GRID ========================================================= */ .gavedeast-locality-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(9,47,98,.17); border-left: 1px solid rgba(9,47,98,.17); } .gavedeast-locality{ display:grid; grid-template-columns: 65px minmax(0,1fr); gap:22px; min-height:235px; padding:30px; border-right: 1px solid rgba(9,47,98,.17); border-bottom: 1px solid rgba(9,47,98,.17); background: rgba(255,255,255,.35); transition: background .25s ease, transform .25s ease; } .gavedeast-locality:hover{ background:#ffffff; transform: translateY(-3px); } .gavedeast-locality-number{ color:#b97800; font-size:25px; font-weight:900; line-height:1; } .gavedeast-locality span{ display:block; margin-bottom:8px; color:#7b8795; font-size:15px; font-weight:850; letter-spacing:1.05px; line-height:1.45; } .gavedeast-locality h3{ margin:0 0 10px; color:#061d3d; font-size:24px; line-height:1.25; letter-spacing:-.3px; } .gavedeast-locality h3 strong{ color:#b97800; } .gavedeast-locality p{ margin:0; color:#586879; font-size:15px; line-height:1.72; } .gavedeast-locality p strong{ color:#092f62; font-weight:750; } /* ========================================================= STATUTORY STRIP ========================================================= */ .gavedeast-statutory{ margin-top:48px; border: 1px solid rgba(185,120,0,.30); border-radius:11px; overflow:hidden; background: linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); box-shadow: 0 20px 40px rgba(6,29,61,.12); } .gavedeast-statutory-title{ display:flex; align-items:center; justify-content:space-between; gap:25px; padding:22px 25px; border-bottom: 1px solid rgba(255,255,255,.12); } .gavedeast-statutory-title span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gavedeast-statutory-title strong{ color:#ffffff; font-size:17px; } .gavedeast-statutory-items{ display:grid; grid-template-columns: repeat(4,1fr); } .gavedeast-statutory-items div{ display:flex; align-items:center; gap:12px; min-height:100px; padding:18px; border-right: 1px solid rgba(255,255,255,.11); } .gavedeast-statutory-items div:last-child{ border-right:0; } .gavedeast-statutory-items b{ color:#f0b429; font-size:18px; font-weight:900; white-space:nowrap; } .gavedeast-statutory-items span{ color:#cbd7e2; font-size:15px; line-height:1.45; } .gavedeast-statutory-items span strong{ color:#ffffff; } /* ========================================================= SECTION 03 — CTA ========================================================= */ .gavedeast-cta{ padding:90px 0; color:#ffffff; background: linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .gavedeast-cta-pattern{ position:absolute; width:700px; height:700px; right:-390px; top:-250px; border: 1px solid rgba(240,180,41,.10); border-radius:50%; } .gavedeast-cta-pattern:after{ content:""; position:absolute; width:440px; height:440px; right:120px; top:120px; border: 1px solid rgba(240,180,41,.07); border-radius:50%; } .gavedeast-cta-layout{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,1fr) 430px; gap:75px; align-items:center; } .gavedeast-cta-copy h2{ max-width:700px; margin:18px 0 22px; color:#ffffff; font-size: clamp( 38px, 4.5vw, 58px ); line-height:1.06; letter-spacing:-1.5px; } .gavedeast-cta-copy h2 strong{ color:#f0b429; } .gavedeast-cta-copy p{ max-width:720px; margin:0 0 17px; color:#d2dee9; font-size:16px; line-height:1.8; } .gavedeast-cta-copy p strong{ color:#ffffff; } /* ========================================================= CTA PANEL ========================================================= */ .gavedeast-cta-panel{ position:relative; padding:30px; border: 1px solid rgba(240,180,41,.35); border-radius:12px; background: rgba(255,255,255,.045); box-shadow: 0 25px 50px rgba(0,0,0,.22); } .gavedeast-cta-panel:before{ content:""; position:absolute; top:0; left:30px; width:85px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavedeast-cta-panel-top{ margin-bottom:22px; } .gavedeast-cta-panel-top span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.25px; } .gavedeast-cta-panel-top strong{ color:#ffffff; font-size:21px; } /* ========================================================= MAIN CTA BUTTON ========================================================= */ .gavedeast-main-button{ display:grid; grid-template-columns: 43px minmax(0,1fr); column-gap:13px; align-items:center; min-height:73px; margin-bottom:12px; padding:10px 17px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 13px 28px rgba(0,0,0,.23); transition: transform .25s ease, box-shadow .25s ease; } .gavedeast-main-button:hover{ color:#04152d; transform: translateY(-2px); box-shadow: 0 17px 33px rgba(0,0,0,.30); } .gavedeast-main-button > span{ grid-row:span 2; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background: rgba(4,21,45,.12); font-size:19px; font-weight:900; } .gavedeast-main-button strong{ display:block; font-size:17px; line-height:1.3; } .gavedeast-main-button small{ display:block; margin-top:2px; font-size:15px; opacity:.72; } /* ========================================================= PHONE BUTTON ========================================================= */ .gavedeast-phone-button{ display:grid; grid-template-columns: 43px minmax(0,1fr); column-gap:13px; align-items:center; min-height:68px; margin-bottom:20px; padding:10px 17px; border: 1px solid rgba(240,180,41,.50); border-radius:8px; color:#ffffff; background: rgba(255,255,255,.035); } .gavedeast-phone-button:hover{ color:#ffffff; border-color:#f0b429; background: rgba(255,255,255,.065); } .gavedeast-phone-button > span{ grid-row:span 2; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#f0b429; background: rgba(240,180,41,.11); font-size:18px; } .gavedeast-phone-button strong{ display:block; font-size:17px; } .gavedeast-phone-button small{ display:block; margin-top:2px; color:#bdcad7; font-size:15px; } /* ========================================================= OFFICE ========================================================= */ .gavedeast-cta-office{ padding-top:19px; border-top: 1px solid rgba(255,255,255,.12); } .gavedeast-cta-office span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavedeast-cta-office strong{ display:block; color:#d4dfe9; font-size:15px; line-height:1.55; font-weight:500; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .gavedeast-hero h1{ font-size:65px; } .gavedeast-landscape-head{ gap:45px; } .gavedeast-cta-layout{ grid-template-columns: minmax(0,1fr) 390px; gap:45px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavedeast-hero{ padding:80px 0 70px; } .gavedeast-hero h1{ font-size:54px; } .gavedeast-landscape{ padding:75px 0; } .gavedeast-landscape-head{ grid-template-columns:1fr; gap:22px; } .gavedeast-locality-grid{ grid-template-columns:1fr; } .gavedeast-cta{ padding:75px 0; } .gavedeast-cta-layout{ grid-template-columns:1fr; gap:45px; } .gavedeast-cta-panel{ max-width:600px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavedeast-hero{ padding:65px 0 58px; } .gavedeast-kicker{ flex-wrap:wrap; font-size:15px; letter-spacing:.9px; } .gavedeast-hero h1{ font-size:40px; letter-spacing:-1.5px; } .gavedeast-hero h1 strong{ font-size:25px; letter-spacing:-.5px; } .gavedeast-hero-lead{ font-size:16px; line-height:1.72; } .gavedeast-hero-bottom{ grid-template-columns:1fr; gap:22px; } .gavedeast-hero-mark{ width:150px; } .gavedeast-hero-tags{ justify-content:flex-start; } .gavedeast-landscape{ padding:65px 0 70px; } .gavedeast-landscape-head h2{ font-size:37px; } .gavedeast-landscape-head > p{ font-size:15px; } .gavedeast-locality{ grid-template-columns: 45px minmax(0,1fr); gap:14px; min-height:0; padding:25px 20px; } .gavedeast-locality h3{ font-size:21px; } .gavedeast-locality p{ font-size:15px; } .gavedeast-statutory-title{ display:block; padding:20px; } .gavedeast-statutory-title strong{ display:block; margin-top:7px; font-size:16px; } .gavedeast-statutory-items{ grid-template-columns: repeat(2,1fr); } .gavedeast-statutory-items div{ min-height:105px; border-bottom: 1px solid rgba(255,255,255,.11); } .gavedeast-statutory-items div:nth-child(2){ border-right:0; } .gavedeast-statutory-items div:nth-child(3), .gavedeast-statutory-items div:nth-child(4){ border-bottom:0; } .gavedeast-statutory-items div:nth-child(4){ border-right:0; } .gavedeast-cta{ padding:65px 0; } .gavedeast-cta-copy h2{ font-size:37px; } .gavedeast-cta-copy p{ font-size:15px; } .gavedeast-cta-panel{ padding:25px 20px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavedeast-hero h1{ font-size:35px; } .gavedeast-hero h1 strong{ font-size:22px; } .gavedeast-hero-lead{ font-size:15px; } .gavedeast-landscape-head h2{ font-size:32px; } .gavedeast-statutory-items div{ display:block; } .gavedeast-statutory-items b{ display:block; margin-bottom:7px; } .gavedeast-cta-copy h2{ font-size:32px; } } /* ========================================================= CENTRAL DELHI COMMERCIAL PROPERTY VALUATION UNIQUE NAMESPACE: gavcdcv- BRAND PALETTE: Deep Navy #04152d Navy #061d3d Royal Navy #092f62 Gold: #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavcdcv-hero, .gavcdcv-framework, .gavcdcv-engagement{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavcdcv-hero *, .gavcdcv-framework *, .gavcdcv-engagement *{ box-sizing:border-box; } .gavcdcv-hero a, .gavcdcv-framework a, .gavcdcv-engagement a{ text-decoration:none; } /* ========================================================= SECTION 01 HERO ========================================================= */ .gavcdcv-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 78% 22%, rgba(240,180,41,.15), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gavcdcv-hero-grid{ position:absolute; inset:0; pointer-events:none; opacity:.65; background-image: linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px ); background-size:75px 75px; mask-image: linear-gradient( 90deg, transparent, #000 18%, #000 82%, transparent ); } .gavcdcv-hero-ring{ position:absolute; border:1px solid rgba(240,180,41,.12); border-radius:50%; pointer-events:none; } .gavcdcv-ring-one{ width:780px; height:780px; right:-420px; top:-280px; } .gavcdcv-ring-two{ width:520px; height:520px; right:-260px; top:-145px; } .gavcdcv-hero-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(430px,.82fr); gap:65px; align-items:center; } /* ========================================================= HERO CONTENT ========================================================= */ .gavcdcv-hero-content{ max-width:780px; } .gavcdcv-kicker{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.55px; line-height:1.5; } .gavcdcv-kicker > span{ width:38px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavcdcv-kicker i{ font-style:normal; opacity:.5; } .gavcdcv-hero h1{ max-width:760px; margin:0; color:#ffffff; font-size:clamp(48px,6vw,77px); font-weight:750; line-height:1.01; letter-spacing:-3px; } .gavcdcv-hero h1 strong{ display:block; color:#f0b429; font-weight:750; } .gavcdcv-hero-lead{ max-width:760px; margin:29px 0 17px; color:#e7edf4; font-size:18px; line-height:1.8; } .gavcdcv-hero-lead strong{ color:#ffffff; font-weight:750; } .gavcdcv-hero-text{ max-width:730px; margin:0; color:#bccbd9; font-size:15px; line-height:1.8; } .gavcdcv-hero-text strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO HIGHLIGHTS ========================================================= */ .gavcdcv-hero-highlights{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:31px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .gavcdcv-hero-highlights div{ display:flex; align-items:center; gap:11px; min-height:82px; padding:13px 15px; border-right:1px solid rgba(255,255,255,.11); } .gavcdcv-hero-highlights div:first-child{ padding-left:0; } .gavcdcv-hero-highlights div:last-child{ border-right:0; } .gavcdcv-hero-highlights span{ color:#b97800; font-size:15px; font-weight:900; } .gavcdcv-hero-highlights strong{ color:#ffffff; font-size:15px; line-height:1.3; } .gavcdcv-hero-highlights small{ display:block; margin-top:3px; color:#aebdcd; font-size:15px; font-weight:500; } /* ========================================================= HERO ACTIONS ========================================================= */ .gavcdcv-hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:29px; } .gavcdcv-primary-button, .gavcdcv-phone-button{ display:flex; align-items:center; gap:12px; min-height:61px; padding:9px 17px; border-radius:8px; } .gavcdcv-primary-button{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 13px 28px rgba(0,0,0,.25); } .gavcdcv-primary-button:hover{ color:#04152d; } .gavcdcv-phone-button{ border:1px solid rgba(240,180,41,.48); color:#ffffff; background:rgba(255,255,255,.035); } .gavcdcv-phone-button:hover{ color:#ffffff; border-color:#f0b429; } .gavcdcv-primary-button > span, .gavcdcv-phone-button > span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border-radius:50%; font-size:18px; font-weight:800; } .gavcdcv-primary-button > span{ background:rgba(4,21,45,.12); } .gavcdcv-phone-button > span{ color:#f0b429; background:rgba(240,180,41,.11); } .gavcdcv-primary-button strong, .gavcdcv-phone-button strong{ display:block; font-size:16px; line-height:1.25; } .gavcdcv-phone-button small{ display:block; margin-top:3px; font-size:15px; opacity:.75; } /* ========================================================= ADDRESS LINE ========================================================= */ .gavcdcv-address-line{ display:flex; align-items:center; gap:13px; margin-top:23px; padding-left:14px; border-left:2px solid #b97800; } .gavcdcv-address-line span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavcdcv-address-line strong{ color:#d4dfe9; font-size:15px; } /* ========================================================= HERO VISUAL ========================================================= */ .gavcdcv-hero-visual{ position:relative; min-height:610px; border:1px solid rgba(240,180,41,.20); border-radius:15px; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.012) ); box-shadow: 0 25px 60px rgba(0,0,0,.20); } .gavcdcv-hero-visual:before{ content:""; position:absolute; top:0; left:30px; width:90px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavcdcv-visual-label{ position:absolute; z-index:5; top:28px; left:30px; right:30px; display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.10); } .gavcdcv-visual-label span, .gavcdcv-visual-label strong{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.25px; } .gavcdcv-visual-core{ position:absolute; top:115px; left:50%; width:390px; height:390px; transform:translateX(-50%); } .gavcdcv-core-circle{ position:absolute; top:105px; left:105px; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; width:180px; height:180px; border:1px solid rgba(240,180,41,.65); border-radius:50%; background: radial-gradient( circle, #092f62, #04152d 72% ); box-shadow: 0 0 0 16px rgba(185,120,0,.035), 0 0 0 32px rgba(185,120,0,.025); } .gavcdcv-core-circle span{ color:#b97800; font-size:15px; font-weight:900; letter-spacing:2px; } .gavcdcv-core-circle strong{ margin-top:5px; color:#ffffff; font-size:20px; font-weight:850; } .gavcdcv-core-circle small{ margin-top:4px; color:#aebdce; font-size:15px; } /* ========================================================= ORBITS ========================================================= */ .gavcdcv-orbit{ position:absolute; left:50%; top:50%; border:1px solid rgba(240,180,41,.18); border-radius:50%; transform:translate(-50%,-50%); } .gavcdcv-orbit span{ position:absolute; padding:5px 9px; border:1px solid rgba(240,180,41,.30); border-radius:20px; color:#f0b429; background:#061d3d; font-size:15px; font-weight:800; letter-spacing:.5px; } .orbit-one{ width:265px; height:265px; } .orbit-one span{ top:-11px; left:90px; } .orbit-two{ width:335px; height:335px; } .orbit-two span{ right:-30px; top:148px; } .orbit-three{ width:390px; height:390px; } .orbit-three span{ left:15px; bottom:12px; } /* ========================================================= VISUAL NODES ========================================================= */ .gavcdcv-visual-node{ position:absolute; z-index:8; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(240,180,41,.50); border-radius:50%; color:#f0b429; background:#04152d; font-size:15px; font-weight:900; } .gavcdcv-visual-node.node-one{ top:55px; left:22px; } .gavcdcv-visual-node.node-two{ top:190px; right:-10px; } .gavcdcv-visual-node.node-three{ bottom:17px; left:80px; } /* ========================================================= VISUAL BOTTOM ========================================================= */ .gavcdcv-visual-bottom{ position:absolute; left:30px; right:30px; bottom:27px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.11); } .gavcdcv-visual-bottom span{ display:block; margin-bottom:4px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavcdcv-visual-bottom strong{ display:block; max-width:370px; color:#ffffff; font-size:16px; line-height:1.45; } .gavcdcv-visual-bottom b{ display:flex; align-items:center; justify-content:center; width:43px; height:43px; flex:none; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:21px; } /* ========================================================= SECTION 02 FRAMEWORK ========================================================= */ .gavcdcv-framework{ padding:105px 0 100px; background: linear-gradient( 180deg, #f8fafc 0%, #edf3f8 100% ); } .gavcdcv-framework-pattern{ position:absolute; right:-350px; top:70px; width:700px; height:700px; border:1px solid rgba(185,120,0,.08); border-radius:50%; } .gavcdcv-section-heading{ position:relative; z-index:2; max-width:900px; margin:0 auto 50px; text-align:center; } .gavcdcv-section-index{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; } .gavcdcv-section-index span{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; border:1px solid rgba(185,120,0,.45); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .gavcdcv-section-index strong{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.45px; } .gavcdcv-section-heading h2{ margin:0 0 18px; color:#061d3d; font-size:clamp(38px,4.5vw,58px); line-height:1.08; letter-spacing:-1.7px; } .gavcdcv-section-heading h2 strong{ color:#b97800; } .gavcdcv-section-heading > p{ max-width:790px; margin:auto; color:#566577; font-size:16px; line-height:1.8; } /* ========================================================= FRAMEWORK GRID ========================================================= */ .gavcdcv-framework-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(9,47,98,.15); border-left:1px solid rgba(9,47,98,.15); } .gavcdcv-framework-card{ min-height:305px; padding:29px; border-right:1px solid rgba(9,47,98,.15); border-bottom:1px solid rgba(9,47,98,.15); background:rgba(255,255,255,.40); transition: background .25s ease, transform .25s ease; } .gavcdcv-framework-card:hover{ background:#ffffff; transform:translateY(-3px); } .gavcdcv-card-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid rgba(9,47,98,.10); } .gavcdcv-card-top span{ color:#b97800; font-size:15px; font-weight:900; } .gavcdcv-card-top b{ color:#7b8795; font-size:15px; font-weight:850; letter-spacing:1.1px; } .gavcdcv-framework-card h3{ margin:23px 0 12px; color:#061d3d; font-size:27px; line-height:1.25; letter-spacing:-.5px; } .gavcdcv-framework-card h3 strong{ color:#b97800; } .gavcdcv-framework-card p{ max-width:600px; margin:0; color:#596879; font-size:15px; line-height:1.75; } .gavcdcv-framework-card p strong{ color:#092f62; font-weight:750; } /* ========================================================= CARD TAGS ========================================================= */ .gavcdcv-card-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; } .gavcdcv-card-tags span{ padding:6px 10px; border:1px solid rgba(185,120,0,.22); border-radius:30px; color:#092f62; background:rgba(185,120,0,.045); font-size:15px; font-weight:700; } /* ========================================================= VALUATION CHECK STRIP ========================================================= */ .gavcdcv-check{ position:relative; z-index:2; display:grid; grid-template-columns:80px minmax(0,1fr); gap:25px; align-items:center; margin-top:40px; padding:27px 30px; border-radius:10px; background: linear-gradient( 120deg, #04152d, #061d3d 65%, #092f62 ); box-shadow: 0 18px 40px rgba(6,29,61,.13); } .gavcdcv-check-number{ display:flex; align-items:center; justify-content:center; width:57px; height:57px; border:1px solid rgba(240,180,41,.45); border-radius:50%; color:#f0b429; font-size:19px; font-weight:900; } .gavcdcv-check-content > span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.1px; } .gavcdcv-check-content h3{ margin:0 0 6px; color:#ffffff; font-size:23px; line-height:1.35; } .gavcdcv-check-content h3 strong{ color:#f0b429; } .gavcdcv-check-content p{ max-width:850px; margin:0; color:#cbd7e2; font-size:15px; line-height:1.65; } .gavcdcv-check-content p strong{ color:#ffffff; } /* ========================================================= SECTION 03 ENGAGEMENT ========================================================= */ .gavcdcv-engagement{ padding:100px 0; color:#ffffff; background: radial-gradient( circle at 20% 80%, rgba(240,180,41,.09), transparent 27% ), linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .gavcdcv-engagement-grid{ position:absolute; inset:0; opacity:.4; background-image: linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ); background-size:80px 80px; } .gavcdcv-engagement-layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.72fr); gap:75px; align-items:center; } .gavcdcv-section-index.light{ justify-content:flex-start; } .gavcdcv-section-index.light span{ border-color:rgba(240,180,41,.45); color:#f0b429; } .gavcdcv-section-index.light strong{ color:#f0b429; } .gavcdcv-engagement-copy h2{ max-width:750px; margin:0 0 22px; color:#ffffff; font-size:clamp(39px,4.8vw,62px); line-height:1.06; letter-spacing:-2px; } .gavcdcv-engagement-copy h2 strong{ display:block; color:#f0b429; } .gavcdcv-engagement-copy > p{ max-width:720px; margin:0; color:#d1dce7; font-size:16px; line-height:1.8; } .gavcdcv-engagement-copy > p strong{ color:#ffffff; } /* ========================================================= ENGAGEMENT POINTS ========================================================= */ .gavcdcv-engagement-points{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px 20px; max-width:730px; margin-top:30px; } .gavcdcv-engagement-points div{ display:flex; align-items:flex-start; gap:10px; } .gavcdcv-engagement-points span{ color:#f0b429; font-size:17px; font-weight:900; } .gavcdcv-engagement-points strong{ color:#dce5ee; font-size:15px; line-height:1.45; } /* ========================================================= ENGAGEMENT CARD ========================================================= */ .gavcdcv-engagement-card{ position:relative; padding:30px; border:1px solid rgba(240,180,41,.27); border-radius:13px; background: linear-gradient( 145deg, rgba(9,47,98,.90), rgba(4,21,45,.96) ); box-shadow: 0 25px 55px rgba(0,0,0,.25); } .gavcdcv-engagement-card:before{ content:""; position:absolute; top:0; left:30px; width:90px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavcdcv-engagement-card-top{ display:flex; align-items:center; justify-content:space-between; gap:15px; } .gavcdcv-engagement-card-top span, .gavcdcv-engagement-card-top strong{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gavcdcv-engagement-divider{ height:1px; margin:20px 0; background:rgba(255,255,255,.11); } .gavcdcv-engagement-address{ margin-bottom:24px; } .gavcdcv-engagement-address span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavcdcv-engagement-address strong{ display:block; color:#dce5ee; font-size:15px; line-height:1.65; font-weight:500; } /* ========================================================= CTA ========================================================= */ .gavcdcv-cta-button{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:64px; margin-bottom:11px; padding:10px 18px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 13px 30px rgba(0,0,0,.25); } .gavcdcv-cta-button:hover{ color:#04152d; } .gavcdcv-cta-button span{ display:flex; align-items:center; justify-content:center; width:37px; height:37px; border-radius:50%; background:rgba(4,21,45,.12); font-size:19px; } .gavcdcv-cta-button strong{ font-size:17px; } /* ========================================================= PHONE BUTTON ========================================================= */ .gavcdcv-call-button{ display:flex; align-items:center; gap:13px; min-height:64px; padding:10px 17px; border:1px solid rgba(240,180,41,.48); border-radius:8px; color:#ffffff; background:rgba(255,255,255,.035); } .gavcdcv-call-button:hover{ color:#ffffff; border-color:#f0b429; } .gavcdcv-call-button > span{ display:flex; align-items:center; justify-content:center; width:37px; height:37px; flex:none; border-radius:50%; color:#f0b429; background:rgba(240,180,41,.10); font-size:17px; } .gavcdcv-call-button strong{ display:block; font-size:16px; } .gavcdcv-call-button small{ display:block; margin-top:3px; color:#aebdcd; font-size:15px; } /* ========================================================= EMAIL ========================================================= */ .gavcdcv-email{ display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding:15px 2px; border-bottom:1px solid rgba(255,255,255,.10); color:#d7e2ec; font-size:15px; } .gavcdcv-email span{ color:#f0b429; font-size:19px; } .gavcdcv-email:hover{ color:#f0b429; } /* ========================================================= PRACTICE NOTE ========================================================= */ .gavcdcv-engagement-note{ margin-top:21px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10); } .gavcdcv-engagement-note span{ display:block; margin-bottom:4px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavcdcv-engagement-note strong{ display:block; color:#ffffff; font-size:18px; } .gavcdcv-engagement-note small{ display:block; margin-top:4px; color:#aebdcd; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .gavcdcv-hero-layout{ grid-template-columns:minmax(0,1fr) minmax(390px,.75fr); gap:40px; } .gavcdcv-hero h1{ font-size:60px; } .gavcdcv-visual-core{ transform:translateX(-50%) scale(.88); transform-origin:center; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavcdcv-hero{ padding:80px 0 70px; } .gavcdcv-hero-layout{ grid-template-columns:1fr; gap:55px; } .gavcdcv-hero-content{ max-width:850px; } .gavcdcv-hero-visual{ width:100%; max-width:650px; margin:auto; } .gavcdcv-framework-grid{ grid-template-columns:1fr; } .gavcdcv-engagement-layout{ grid-template-columns:1fr; gap:50px; } .gavcdcv-engagement-copy{ max-width:850px; } .gavcdcv-engagement-card{ max-width:650px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavcdcv-hero{ padding:62px 0 58px; } .gavcdcv-hero h1{ font-size:41px; letter-spacing:-1.7px; } .gavcdcv-hero-lead{ font-size:16px; line-height:1.75; } .gavcdcv-hero-text{ font-size:15px; } .gavcdcv-hero-highlights{ grid-template-columns:1fr; } .gavcdcv-hero-highlights div, .gavcdcv-hero-highlights div:first-child{ min-height:65px; padding:12px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); } .gavcdcv-hero-highlights div:last-child{ border-bottom:0; } .gavcdcv-hero-actions{ align-items:stretch; flex-direction:column; } .gavcdcv-primary-button, .gavcdcv-phone-button{ width:100%; justify-content:center; } .gavcdcv-hero-visual{ min-height:530px; } .gavcdcv-visual-core{ top:100px; transform:translateX(-50%) scale(.70); } .gavcdcv-visual-bottom{ left:20px; right:20px; bottom:20px; } .gavcdcv-framework{ padding:70px 0; } .gavcdcv-section-heading h2{ font-size:36px; } .gavcdcv-section-heading > p{ font-size:15px; } .gavcdcv-framework-card{ min-height:0; padding:24px 20px; } .gavcdcv-framework-card h3{ font-size:24px; } .gavcdcv-check{ grid-template-columns:1fr; gap:16px; padding:23px 20px; } .gavcdcv-engagement{ padding:70px 0; } .gavcdcv-engagement-copy h2{ font-size:38px; letter-spacing:-1px; } .gavcdcv-engagement-copy > p{ font-size:15px; } .gavcdcv-engagement-points{ grid-template-columns:1fr; } .gavcdcv-engagement-card{ padding:24px 20px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavcdcv-hero h1{ font-size:35px; } .gavcdcv-kicker{ font-size:15px; letter-spacing:1px; } .gavcdcv-hero-visual{ min-height:470px; } .gavcdcv-visual-core{ top:75px; transform:translateX(-50%) scale(.57); } .gavcdcv-visual-label{ left:20px; right:20px; } .gavcdcv-visual-label span, .gavcdcv-visual-label strong{ font-size:15px; } .gavcdcv-visual-bottom{ padding-top:13px; } .gavcdcv-visual-bottom strong{ font-size:15px; } .gavcdcv-section-heading h2{ font-size:31px; } .gavcdcv-engagement-copy h2{ font-size:32px; } .gavcdcv-engagement-card-top{ display:block; } .gavcdcv-engagement-card-top strong{ display:block; margin-top:5px; } } /* ========================================================= CENTRAL DELHI COMMERCIAL PROPERTY VALUATION UNIQUE NAMESPACE: gavcd- ROYAL BRAND PALETTE: #04152d #061d3d #092f62 #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavcd-hero, .gavcd-framework, .gavcd-assignments{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavcd-hero *, .gavcd-framework *, .gavcd-assignments *{ box-sizing:border-box; } .gavcd-hero a, .gavcd-framework a, .gavcd-assignments a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .gavcd-hero{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 78% 40%, rgba(240,180,41,.12), transparent 31% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gavcd-hero-pattern{ position:absolute; inset:0; pointer-events:none; } .gavcd-hero-pattern:before{ content:""; position:absolute; right:-300px; top:-320px; width:760px; height:760px; border:1px solid rgba(240,180,41,.12); border-radius:50%; } .gavcd-hero-pattern:after{ content:""; position:absolute; right:-190px; top:-210px; width:520px; height:520px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .gavcd-hero-layout{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,1.15fr) minmax(390px,.85fr); gap:70px; align-items:center; } /* ========================================================= HERO CONTENT ========================================================= */ .gavcd-hero-content{ max-width:820px; } .gavcd-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:25px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.55px; line-height:1.5; } .gavcd-eyebrow span{ width:42px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavcd-hero h1{ margin:0; color:#ffffff; font-size: clamp( 48px, 6vw, 76px ); font-weight:750; line-height:1.02; letter-spacing:-3px; } .gavcd-hero h1 strong{ display:block; color:#f0b429; font-weight:750; } .gavcd-hero-lead{ max-width:760px; margin:29px 0 0; color:#d8e3ed; font-size:18px; line-height:1.82; } .gavcd-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO HIGHLIGHT ========================================================= */ .gavcd-hero-highlight{ display:grid; grid-template-columns:55px 1fr; gap:18px; max-width:760px; margin-top:31px; padding:21px; border-left:3px solid #f0b429; background: linear-gradient( 90deg, rgba(255,255,255,.065), rgba(255,255,255,.018) ); border-radius:0 9px 9px 0; } .gavcd-highlight-mark{ display:flex; align-items:center; justify-content:center; width:45px; height:45px; border:1px solid rgba(240,180,41,.55); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gavcd-hero-highlight strong{ display:block; margin-bottom:5px; color:#ffffff; font-size:17px; line-height:1.4; } .gavcd-hero-highlight p{ margin:0; color:#bfcddd; font-size:15px; line-height:1.65; } /* ========================================================= HERO ACTIONS ========================================================= */ .gavcd-hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:30px; } .gavcd-primary-cta, .gavcd-phone-cta{ display:flex; align-items:center; gap:12px; min-height:62px; padding:10px 18px; border-radius:8px; } .gavcd-primary-cta{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 13px 30px rgba(0,0,0,.24); } .gavcd-primary-cta:hover{ color:#04152d; } .gavcd-phone-cta{ border:1px solid rgba(240,180,41,.50); color:#ffffff; background:rgba(255,255,255,.035); } .gavcd-phone-cta:hover{ color:#ffffff; border-color:#f0b429; } .gavcd-primary-cta > span, .gavcd-phone-cta > span{ display:flex; align-items:center; justify-content:center; width:37px; height:37px; flex:none; border-radius:50%; font-size:18px; font-weight:900; } .gavcd-primary-cta > span{ background:rgba(4,21,45,.12); } .gavcd-phone-cta > span{ color:#f0b429; background:rgba(240,180,41,.11); } .gavcd-primary-cta strong, .gavcd-phone-cta strong{ display:block; font-size:16px; line-height:1.3; } .gavcd-phone-cta small{ display:block; margin-top:2px; font-size:15px; opacity:.75; } /* ========================================================= HERO LOCATION ========================================================= */ .gavcd-hero-location{ display:flex; align-items:center; gap:15px; margin-top:28px; padding-top:19px; border-top:1px solid rgba(255,255,255,.12); } .gavcd-hero-location span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavcd-hero-location strong{ color:#d9e4ee; font-size:15px; font-weight:600; } /* ========================================================= HERO VISUAL ========================================================= */ .gavcd-hero-visual{ position:relative; min-height:570px; display:flex; align-items:center; justify-content:center; } .gavcd-visual-orbit{ position:absolute; border:1px solid rgba(240,180,41,.16); border-radius:50%; } .gavcd-visual-orbit.orbit-one{ width:500px; height:500px; } .gavcd-visual-orbit.orbit-two{ width:360px; height:360px; border-color:rgba(240,180,41,.10); } /* ========================================================= COMMERCIAL EMBLEM ========================================================= */ .gavcd-commercial-emblem{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; width:340px; height:340px; border: 1px solid rgba(240,180,41,.50); border-radius:50%; background: radial-gradient( circle, rgba(9,47,98,.92), rgba(4,21,45,.96) ); box-shadow: 0 30px 70px rgba(0,0,0,.35); } .gavcd-emblem-top{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:3px; } .gavcd-commercial-emblem strong{ margin-top:8px; color:#ffffff; font-size:36px; line-height:1; letter-spacing:2px; } .gavcd-emblem-bottom{ margin-top:7px; color:#f0b429; font-size:17px; font-weight:800; letter-spacing:4px; } .gavcd-commercial-emblem i{ width:75px; height:2px; margin:21px 0 15px; background: linear-gradient( 90deg, transparent, #f0b429, transparent ); } .gavcd-commercial-emblem small{ color:#cbd7e3; font-size:15px; font-weight:700; letter-spacing:1.5px; } /* ========================================================= FLOATING STATS ========================================================= */ .gavcd-visual-stat{ position:absolute; z-index:8; display:flex; align-items:center; gap:11px; padding:13px 15px; border: 1px solid rgba(240,180,41,.42); border-radius:8px; background: rgba(4,21,45,.95); box-shadow: 0 16px 35px rgba(0,0,0,.25); } .gavcd-visual-stat strong{ color:#f0b429; font-size:22px; font-weight:900; } .gavcd-visual-stat span{ color:#d8e2ec; font-size:15px; line-height:1.35; } .gavcd-visual-stat.stat-one{ top:75px; left:0; } .gavcd-visual-stat.stat-two{ right:-5px; top:150px; } .gavcd-visual-stat.stat-three{ right:0; bottom:75px; } .gavcd-vertical-label{ position:absolute; right:-8px; bottom:205px; color:rgba(240,180,41,.45); font-size:15px; font-weight:900; letter-spacing:4px; writing-mode:vertical-rl; } /* ========================================================= SECTION 02 — FRAMEWORK ========================================================= */ .gavcd-framework{ padding:100px 0 105px; background: linear-gradient( 180deg, #ffffff 0%, #f3f7fb 100% ); } /* ========================================================= SECTION HEADING ========================================================= */ .gavcd-section-heading{ max-width:900px; margin:0 auto 52px; text-align:center; } .gavcd-section-index{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; } .gavcd-section-index span{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; border: 1px solid rgba(185,120,0,.50); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .gavcd-section-index b{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.45px; } .gavcd-section-heading h2{ margin:0 0 18px; color:#061d3d; font-size: clamp( 38px, 4.7vw, 60px ); line-height:1.08; letter-spacing:-1.8px; } .gavcd-section-heading h2 strong{ color:#b97800; } .gavcd-section-heading > p{ max-width:790px; margin:auto; color:#58687a; font-size:16px; line-height:1.8; } .gavcd-section-heading > p strong{ color:#092f62; } /* ========================================================= FRAMEWORK GRID ========================================================= */ .gavcd-framework-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .gavcd-framework-card{ position:relative; min-height:310px; padding:28px; border: 1px solid rgba(9,47,98,.12); border-radius:11px; background:#ffffff; box-shadow: 0 12px 30px rgba(6,29,61,.055); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .gavcd-framework-card:hover{ transform:translateY(-5px); border-color: rgba(185,120,0,.42); box-shadow: 0 20px 40px rgba(6,29,61,.11); } .gavcd-card-number{ position:absolute; top:20px; right:22px; color:#b97800; font-size:15px; font-weight:900; } .gavcd-card-icon{ display:inline-flex; align-items:center; justify-content:center; min-height:35px; padding:0 11px; border-radius:5px; color:#b97800; background: rgba(185,120,0,.08); font-size:15px; font-weight:850; letter-spacing:1px; } .gavcd-framework-card h3{ margin:24px 0 11px; color:#061d3d; font-size:24px; line-height:1.28; } .gavcd-framework-card h3 strong{ color:#b97800; } .gavcd-framework-card p{ margin:0; color:#59697b; font-size:15px; line-height:1.75; } .gavcd-framework-card p strong{ color:#092f62; } /* ========================================================= FRAMEWORK NOTE ========================================================= */ .gavcd-framework-note{ display:flex; align-items:center; gap:18px; margin-top:28px; padding:21px 23px; border-left:3px solid #b97800; border-radius:0 8px 8px 0; background: linear-gradient( 90deg, rgba(185,120,0,.08), rgba(185,120,0,.025) ); } .gavcd-note-mark{ display:flex; align-items:center; justify-content:center; width:39px; height:39px; flex:none; border-radius:50%; color:#ffffff; background:#092f62; font-size:22px; font-weight:700; } .gavcd-framework-note p{ margin:0; color:#4e6073; font-size:15px; line-height:1.7; } .gavcd-framework-note p strong{ color:#092f62; } /* ========================================================= SECTION 03 — ASSIGNMENTS ========================================================= */ .gavcd-assignments{ padding:105px 0; color:#ffffff; background: radial-gradient( circle at 85% 25%, rgba(240,180,41,.11), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 55%, #092f62 ); } .gavcd-assignment-bg{ position:absolute; width:700px; height:700px; right:-430px; top:-170px; border: 1px solid rgba(240,180,41,.10); border-radius:50%; } .gavcd-assignment-layout{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,1.15fr) minmax(370px,.75fr); gap:70px; align-items:start; } /* ========================================================= ASSIGNMENT CONTENT ========================================================= */ .gavcd-section-index.light{ justify-content:flex-start; } .gavcd-section-index.light span{ border-color:rgba(240,180,41,.50); color:#f0b429; } .gavcd-section-index.light b{ color:#f0b429; } .gavcd-assignment-content h2{ max-width:720px; margin:0 0 18px; color:#ffffff; font-size: clamp( 38px, 4.5vw, 58px ); line-height:1.08; letter-spacing:-1.6px; } .gavcd-assignment-content h2 strong{ color:#f0b429; } .gavcd-assignment-intro{ max-width:720px; margin:0 0 35px; color:#cbd7e3; font-size:16px; line-height:1.8; } /* ========================================================= ASSIGNMENT LIST ========================================================= */ .gavcd-assignment-list{ border-top: 1px solid rgba(255,255,255,.13); } .gavcd-assignment-item{ display:grid; grid-template-columns:46px 1fr; gap:17px; padding:19px 0; border-bottom: 1px solid rgba(255,255,255,.11); } .gavcd-assignment-item > span{ display:flex; align-items:center; justify-content:center; width:37px; height:37px; border: 1px solid rgba(240,180,41,.38); border-radius:50%; color:#f0b429; font-size:15px; font-weight:900; } .gavcd-assignment-item strong{ display:block; margin-bottom:4px; color:#ffffff; font-size:18px; } .gavcd-assignment-item p{ margin:0; color:#aebdcd; font-size:15px; line-height:1.6; } .gavcd-assignment-item p strong{ display:inline; color:#f0b429; font-size:15px; } /* ========================================================= CTA PANEL ========================================================= */ .gavcd-assignment-cta{ position:relative; padding:32px; border: 1px solid rgba(240,180,41,.32); border-radius:13px; background: linear-gradient( 145deg, rgba(9,47,98,.96), rgba(4,21,45,.98) ); box-shadow: 0 25px 55px rgba(0,0,0,.28); } .gavcd-assignment-cta:before{ content:""; position:absolute; top:0; left:32px; width:85px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavcd-cta-topline{ display:flex; justify-content:space-between; gap:15px; padding-bottom:18px; border-bottom: 1px solid rgba(255,255,255,.11); } .gavcd-cta-topline span, .gavcd-cta-topline b{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavcd-cta-symbol{ position:relative; display:flex; align-items:center; justify-content:center; width:100px; height:100px; margin:28px auto; border: 1px solid rgba(240,180,41,.45); border-radius:50%; } .gavcd-cta-symbol:before{ content:""; position:absolute; inset:8px; border: 1px solid rgba(240,180,41,.13); border-radius:50%; } .gavcd-cta-symbol span{ color:#f0b429; font-size:27px; font-weight:900; letter-spacing:2px; } .gavcd-cta-symbol i{ position:absolute; width:13px; height:13px; right:-4px; top:15px; border-radius:50%; background:#f0b429; } .gavcd-assignment-cta h3{ margin:0 0 14px; color:#ffffff; font-size:28px; line-height:1.35; } .gavcd-assignment-cta h3 strong{ color:#f0b429; } .gavcd-assignment-cta > p{ margin:0 0 24px; color:#c5d2df; font-size:15px; line-height:1.75; } /* ========================================================= MAIN CTA ========================================================= */ .gavcd-main-button{ display:flex; align-items:center; gap:13px; min-height:66px; margin-bottom:11px; padding:11px 16px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 14px 30px rgba(0,0,0,.24); } .gavcd-main-button:hover{ color:#04152d; } .gavcd-main-button > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:50%; background:rgba(4,21,45,.12); font-size:19px; font-weight:900; } .gavcd-main-button strong{ display:block; font-size:17px; line-height:1.3; } .gavcd-main-button small{ display:block; margin-top:3px; font-size:15px; opacity:.72; } /* ========================================================= CALL BUTTON ========================================================= */ .gavcd-call-button{ display:flex; align-items:center; gap:13px; min-height:64px; margin-bottom:23px; padding:10px 16px; border: 1px solid rgba(240,180,41,.48); border-radius:8px; color:#ffffff; background: rgba(255,255,255,.035); } .gavcd-call-button:hover{ color:#ffffff; border-color:#f0b429; } .gavcd-call-button > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:50%; color:#f0b429; background: rgba(240,180,41,.11); font-size:18px; } .gavcd-call-button strong{ display:block; color:#ffffff; font-size:17px; } .gavcd-call-button small{ display:block; margin-top:2px; color:#b9c7d5; font-size:15px; } /* ========================================================= OFFICE ========================================================= */ .gavcd-office{ padding-top:20px; border-top: 1px solid rgba(255,255,255,.11); } .gavcd-office span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavcd-office strong{ display:block; color:#d6e0e9; font-size:15px; line-height:1.6; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .gavcd-hero-layout{ gap:40px; } .gavcd-hero h1{ font-size:60px; } .gavcd-framework-grid{ grid-template-columns:repeat(2,1fr); } .gavcd-assignment-layout{ gap:45px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavcd-hero{ padding:80px 0; } .gavcd-hero-layout{ grid-template-columns:1fr; gap:65px; } .gavcd-hero-content{ max-width:850px; margin:auto; } .gavcd-hero-visual{ min-height:510px; max-width:650px; width:100%; margin:auto; } .gavcd-assignment-layout{ grid-template-columns:1fr; } .gavcd-assignment-cta{ max-width:620px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavcd-hero{ padding:65px 0; } .gavcd-eyebrow{ flex-wrap:wrap; font-size:15px; letter-spacing:1px; } .gavcd-hero h1{ font-size:42px; letter-spacing:-1.8px; } .gavcd-hero-lead{ font-size:16px; line-height:1.75; } .gavcd-hero-highlight{ grid-template-columns:48px 1fr; padding:17px; } .gavcd-hero-actions{ align-items:stretch; flex-direction:column; } .gavcd-primary-cta, .gavcd-phone-cta{ width:100%; } .gavcd-hero-location{ align-items:flex-start; flex-direction:column; gap:5px; } .gavcd-hero-visual{ min-height:410px; } .gavcd-visual-orbit.orbit-one{ width:380px; height:380px; } .gavcd-visual-orbit.orbit-two{ width:275px; height:275px; } .gavcd-commercial-emblem{ width:245px; height:245px; } .gavcd-commercial-emblem strong{ font-size:27px; } .gavcd-emblem-bottom{ font-size:15px; } .gavcd-visual-stat{ padding:9px 11px; } .gavcd-visual-stat strong{ font-size:19px; } .gavcd-visual-stat span{ font-size:15px; } .gavcd-visual-stat.stat-one{ top:40px; left:0; } .gavcd-visual-stat.stat-two{ right:0; top:85px; } .gavcd-visual-stat.stat-three{ right:0; bottom:35px; } .gavcd-vertical-label{ display:none; } .gavcd-framework{ padding:70px 0; } .gavcd-section-heading h2{ font-size:38px; } .gavcd-section-heading > p{ font-size:15px; } .gavcd-framework-grid{ grid-template-columns:1fr; } .gavcd-framework-card{ min-height:0; } .gavcd-framework-note{ align-items:flex-start; } .gavcd-assignments{ padding:70px 0; } .gavcd-assignment-content h2{ font-size:38px; } .gavcd-assignment-intro{ font-size:15px; } .gavcd-assignment-cta{ padding:25px 20px; } .gavcd-assignment-cta h3{ font-size:25px; } .gavcd-cta-topline{ align-items:flex-start; flex-direction:column; gap:6px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavcd-hero h1{ font-size:36px; } .gavcd-commercial-emblem{ width:215px; height:215px; } .gavcd-commercial-emblem strong{ font-size:24px; } .gavcd-emblem-top{ font-size:15px; } .gavcd-emblem-bottom{ font-size:15px; letter-spacing:2px; } .gavcd-visual-stat.stat-one{ left:-5px; } .gavcd-visual-stat.stat-two{ right:-5px; } .gavcd-visual-stat.stat-three{ right:-5px; } .gavcd-section-heading h2{ font-size:33px; } .gavcd-assignment-content h2{ font-size:34px; } } /* ========================================================= GURUGRAM HARYANA RERA PROPERTY VALUATION UNIQUE NAMESPACE: gavgrera- ROYAL NAVY + GOLD SYSTEM ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .gavgrera-hero, .gavgrera-framework, .gavgrera-practice{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .gavgrera-hero *, .gavgrera-framework *, .gavgrera-practice *{ box-sizing:border-box; } .gavgrera-hero a, .gavgrera-framework a, .gavgrera-practice a{ text-decoration:none; } /* ========================================================= SECTION 01 HERO ========================================================= */ .gavgrera-hero{ padding:105px 0 80px; color:#ffffff; background: radial-gradient( circle at 83% 20%, rgba(240,180,41,.15), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .gavgrera-hero-grid{ position:absolute; inset:0; pointer-events:none; opacity:.9; background: linear-gradient( 90deg, transparent 0, transparent 9%, rgba(240,180,41,.045) 9.05%, transparent 9.1%, transparent 91%, rgba(240,180,41,.045) 91.05%, transparent 91.1% ); } .gavgrera-hero-grid:before{ content:""; position:absolute; width:750px; height:750px; right:-430px; top:-330px; border:1px solid rgba(240,180,41,.13); border-radius:50%; } .gavgrera-hero-grid:after{ content:""; position:absolute; width:520px; height:520px; right:-310px; top:-215px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .gavgrera-hero-inner{ position:relative; z-index:2; max-width:1160px; margin:auto; } .gavgrera-kicker{ display:flex; align-items:center; gap:12px; margin-bottom:26px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.55px; line-height:1.5; } .gavgrera-kicker span{ width:40px; height:2px; flex:none; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavgrera-hero h1{ max-width:970px; margin:0; color:#ffffff; font-size:clamp(48px,6.3vw,78px); font-weight:750; line-height:1.01; letter-spacing:-3px; } .gavgrera-hero h1 strong{ display:block; color:#f0b429; font-weight:750; } .gavgrera-hero h1 small{ display:block; margin-top:20px; color:#ffffff; font-size:clamp(23px,3vw,34px); font-weight:450; line-height:1.25; letter-spacing:-.8px; } .gavgrera-hero-lead{ max-width:900px; margin:32px 0 0; color:#dce6f0; font-size:18px; line-height:1.8; } .gavgrera-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO STRIP ========================================================= */ .gavgrera-hero-strip{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1000px; margin-top:42px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); } .gavgrera-hero-strip div{ display:flex; align-items:center; gap:13px; min-height:88px; padding:15px 18px; border-right:1px solid rgba(255,255,255,.11); } .gavgrera-hero-strip div:first-child{ padding-left:0; } .gavgrera-hero-strip div:last-child{ border-right:0; } .gavgrera-hero-strip strong{ color:#f0b429; font-size:23px; font-weight:900; line-height:1; } .gavgrera-hero-strip span{ color:#cdd9e5; font-size:15px; line-height:1.4; } /* ========================================================= HERO BOTTOM ========================================================= */ .gavgrera-hero-bottom{ display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:32px; } .gavgrera-location-line{ max-width:700px; } .gavgrera-location-line span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.1px; } .gavgrera-location-line strong{ display:block; color:#dce6ef; font-size:15px; line-height:1.6; font-weight:600; } .gavgrera-hero-actions{ display:flex; align-items:center; gap:10px; flex:none; } .gavgrera-primary-btn, .gavgrera-phone-btn{ display:flex; align-items:center; gap:11px; min-height:58px; padding:9px 16px; border-radius:8px; } .gavgrera-primary-btn{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 28px rgba(0,0,0,.24); } .gavgrera-primary-btn:hover{ color:#04152d; } .gavgrera-phone-btn{ border:1px solid rgba(240,180,41,.50); color:#ffffff; background:rgba(255,255,255,.035); } .gavgrera-phone-btn:hover{ color:#ffffff; border-color:#f0b429; } .gavgrera-primary-btn span, .gavgrera-phone-btn span{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; font-size:18px; } .gavgrera-primary-btn span{ background:rgba(4,21,45,.12); } .gavgrera-phone-btn span{ color:#f0b429; background:rgba(240,180,41,.10); } .gavgrera-primary-btn strong, .gavgrera-phone-btn strong{ font-size:15px; white-space:nowrap; } /* ========================================================= SECTION 02 FRAMEWORK ========================================================= */ .gavgrera-framework{ padding:100px 0 95px; background: linear-gradient( 180deg, #f8fafc 0%, #eef3f8 100% ); } .gavgrera-framework-head{ display:grid; grid-template-columns:1fr .85fr; gap:70px; align-items:end; margin-bottom:48px; } .gavgrera-section-label{ display:inline-flex; align-items:center; gap:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.45px; line-height:1.5; } .gavgrera-section-label:before{ content:""; width:34px; height:2px; background:#b97800; } .gavgrera-section-label.light{ color:#f0b429; } .gavgrera-section-label.light:before{ background:#f0b429; } .gavgrera-framework-head h2{ max-width:730px; margin:16px 0 0; color:#061d3d; font-size:clamp(38px,4.6vw,58px); line-height:1.08; letter-spacing:-1.6px; } .gavgrera-framework-head h2 strong{ color:#b97800; } .gavgrera-framework-head > p{ margin:0; color:#566678; font-size:16px; line-height:1.85; } .gavgrera-framework-head > p strong{ color:#092f62; } /* ========================================================= VALUATION MATRIX ========================================================= */ .gavgrera-matrix{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid rgba(9,47,98,.14); background:rgba(9,47,98,.14); } .gavgrera-matrix-card{ min-height:310px; padding:27px; background:#ffffff; transition: transform .25s ease, box-shadow .25s ease; } .gavgrera-matrix-card:hover{ position:relative; z-index:2; transform:translateY(-4px); box-shadow: 0 18px 35px rgba(6,29,61,.12); } .gavgrera-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:27px; } .gavgrera-card-top span{ color:#b97800; font-size:22px; font-weight:900; } .gavgrera-card-top b{ padding:6px 10px; border:1px solid rgba(185,120,0,.25); border-radius:50px; color:#b97800; font-size:15px; letter-spacing:.8px; } .gavgrera-matrix-card h3{ margin:0 0 13px; color:#061d3d; font-size:24px; line-height:1.25; } .gavgrera-matrix-card h3 strong{ color:#b97800; } .gavgrera-matrix-card p{ margin:0; color:#5a6979; font-size:15px; line-height:1.75; } .gavgrera-matrix-card p strong{ color:#092f62; font-weight:750; } .gavgrera-card-line{ width:45px; height:2px; margin:23px 0 12px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavgrera-matrix-card small{ color:#7b8795; font-size:15px; line-height:1.5; } /* ========================================================= VALUATION AXIS ========================================================= */ .gavgrera-axis{ margin-top:42px; padding:26px 28px; border:1px solid rgba(185,120,0,.24); border-radius:11px; background: linear-gradient( 135deg, rgba(9,47,98,.055), rgba(185,120,0,.045) ); } .gavgrera-axis-title{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid rgba(9,47,98,.11); } .gavgrera-axis-title span{ color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.2px; } .gavgrera-axis-title strong{ color:#061d3d; font-size:17px; } .gavgrera-axis-flow{ display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr; align-items:center; margin-top:20px; } .gavgrera-axis-flow div{ display:flex; align-items:center; gap:13px; } .gavgrera-axis-flow b{ color:#b97800; font-size:18px; } .gavgrera-axis-flow span{ color:#092f62; font-size:15px; font-weight:750; line-height:1.35; } .gavgrera-axis-flow i{ color:#b97800; font-size:21px; font-style:normal; text-align:center; } /* ========================================================= SECTION 03 PRACTICE ========================================================= */ .gavgrera-practice{ padding:100px 0 80px; color:#ffffff; background: radial-gradient( circle at 90% 30%, rgba(240,180,41,.12), transparent 28% ), linear-gradient( 135deg, #04152d, #061d3d 57%, #092f62 ); } .gavgrera-practice-orbit{ position:absolute; width:850px; height:850px; right:-500px; top:-270px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .gavgrera-practice-orbit:after{ content:""; position:absolute; inset:100px; border:1px solid rgba(240,180,41,.07); border-radius:50%; } .gavgrera-practice-layout{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .75fr; gap:75px; align-items:start; } .gavgrera-practice-copy h2{ max-width:720px; margin:17px 0 24px; color:#ffffff; font-size:clamp(40px,4.6vw,59px); line-height:1.06; letter-spacing:-1.7px; } .gavgrera-practice-copy h2 strong{ color:#f0b429; } .gavgrera-practice-copy > p{ max-width:760px; margin:0 0 18px; color:#d4e0eb; font-size:16px; line-height:1.85; } .gavgrera-practice-copy > p strong{ color:#ffffff; } /* ========================================================= COVERAGE ========================================================= */ .gavgrera-coverage{ display:grid; grid-template-columns:repeat(2,1fr); margin-top:35px; border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12); } .gavgrera-coverage div{ min-height:145px; padding:20px; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); } .gavgrera-coverage span{ display:block; margin-bottom:18px; color:#b97800; font-size:15px; font-weight:900; } .gavgrera-coverage strong{ display:block; margin-bottom:7px; color:#ffffff; font-size:18px; line-height:1.35; } .gavgrera-coverage small{ display:block; color:#bdcbd8; font-size:15px; line-height:1.55; } /* ========================================================= CONTACT PANEL ========================================================= */ .gavgrera-contact{ position:relative; padding:31px; border:1px solid rgba(240,180,41,.28); border-radius:13px; background: linear-gradient( 145deg, rgba(9,47,98,.90), rgba(6,29,61,.96) ); box-shadow: 0 25px 50px rgba(0,0,0,.25); } .gavgrera-contact:before{ content:""; position:absolute; left:31px; top:0; width:82px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .gavgrera-contact-top > span{ display:block; margin-bottom:9px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .gavgrera-contact-top h3{ margin:0 0 15px; color:#ffffff; font-size:29px; line-height:1.3; } .gavgrera-contact-top h3 strong{ color:#f0b429; } .gavgrera-contact-top p{ margin:0 0 25px; color:#ccd8e4; font-size:15px; line-height:1.7; } .gavgrera-contact-top p strong{ color:#ffffff; } /* ========================================================= CONTACT BUTTONS ========================================================= */ .gavgrera-main-cta, .gavgrera-call-cta{ display:flex; align-items:center; gap:13px; width:100%; min-height:68px; margin-bottom:11px; padding:10px 15px; border-radius:8px; } .gavgrera-main-cta{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 13px 30px rgba(0,0,0,.25); } .gavgrera-main-cta:hover{ color:#04152d; } .gavgrera-call-cta{ border:1px solid rgba(240,180,41,.48); color:#ffffff; background:rgba(255,255,255,.035); } .gavgrera-call-cta:hover{ color:#ffffff; border-color:#f0b429; } .gavgrera-main-cta > span, .gavgrera-call-cta > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:50%; font-size:19px; } .gavgrera-main-cta > span{ background:rgba(4,21,45,.12); } .gavgrera-call-cta > span{ color:#f0b429; background:rgba(240,180,41,.11); } .gavgrera-main-cta strong, .gavgrera-call-cta strong{ display:block; font-size:16px; line-height:1.3; } .gavgrera-main-cta small, .gavgrera-call-cta small{ display:block; margin-top:3px; font-size:15px; line-height:1.35; } .gavgrera-call-cta small{ color:#bfcbd8; } /* ========================================================= CONTACT POINTS ========================================================= */ .gavgrera-contact-points{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.11); } .gavgrera-contact-points div{ margin-bottom:16px; } .gavgrera-contact-points div:last-child{ margin-bottom:0; } .gavgrera-contact-points span{ display:block; margin-bottom:5px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .gavgrera-contact-points strong{ display:block; color:#d4dfe9; font-size:15px; line-height:1.5; font-weight:550; } /* ========================================================= BOTTOM STATEMENT ========================================================= */ .gavgrera-bottom-statement{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:65px; padding:31px 35px; border:1px solid rgba(240,180,41,.18); border-radius:12px; background:rgba(255,255,255,.035); } .gavgrera-bottom-statement > div span{ display:block; margin-bottom:7px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.25px; } .gavgrera-bottom-statement h3{ margin:0; color:#ffffff; font-size:27px; line-height:1.3; } .gavgrera-bottom-statement h3 strong{ color:#f0b429; } .gavgrera-bottom-button{ display:flex; align-items:center; justify-content:center; gap:15px; min-height:56px; padding:0 23px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); font-size:15px; font-weight:850; white-space:nowrap; box-shadow: 0 11px 27px rgba(0,0,0,.24); } .gavgrera-bottom-button:hover{ color:#04152d; } .gavgrera-bottom-button span{ font-size:20px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .gavgrera-hero h1{ font-size:64px; } .gavgrera-framework-head{ gap:45px; } .gavgrera-practice-layout{ gap:45px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .gavgrera-hero{ padding:80px 0 70px; } .gavgrera-hero h1{ font-size:54px; } .gavgrera-hero-strip{ grid-template-columns:repeat(2,1fr); } .gavgrera-hero-strip div:nth-child(2){ border-right:0; } .gavgrera-hero-strip div:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.11); } .gavgrera-hero-bottom{ align-items:flex-start; flex-direction:column; } .gavgrera-framework{ padding:75px 0; } .gavgrera-framework-head{ grid-template-columns:1fr; gap:25px; } .gavgrera-matrix{ grid-template-columns:repeat(2,1fr); } .gavgrera-practice{ padding:75px 0; } .gavgrera-practice-layout{ grid-template-columns:1fr; gap:50px; } .gavgrera-contact{ max-width:650px; } .gavgrera-bottom-statement{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .gavgrera-hero{ padding:62px 0 58px; } .gavgrera-kicker{ flex-wrap:wrap; font-size:15px; letter-spacing:1px; } .gavgrera-hero h1{ font-size:40px; line-height:1.04; letter-spacing:-1.5px; } .gavgrera-hero h1 small{ font-size:23px; } .gavgrera-hero-lead{ font-size:16px; line-height:1.75; } .gavgrera-hero-strip{ grid-template-columns:1fr; } .gavgrera-hero-strip div, .gavgrera-hero-strip div:first-child{ min-height:70px; padding:14px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.11); } .gavgrera-hero-strip div:last-child{ border-bottom:0; } .gavgrera-hero-actions{ width:100%; flex-direction:column; align-items:stretch; } .gavgrera-primary-btn, .gavgrera-phone-btn{ justify-content:center; width:100%; } .gavgrera-framework{ padding:65px 0; } .gavgrera-framework-head h2{ font-size:37px; } .gavgrera-framework-head > p{ font-size:15px; } .gavgrera-matrix{ grid-template-columns:1fr; } .gavgrera-matrix-card{ min-height:0; padding:24px; } .gavgrera-axis{ padding:22px 18px; } .gavgrera-axis-title{ display:block; } .gavgrera-axis-title strong{ display:block; margin-top:7px; } .gavgrera-axis-flow{ grid-template-columns:1fr; gap:14px; } .gavgrera-axis-flow i{ transform:rotate(90deg); text-align:left; margin-left:8px; } .gavgrera-practice{ padding:65px 0; } .gavgrera-practice-copy h2{ font-size:37px; } .gavgrera-practice-copy > p{ font-size:15px; } .gavgrera-coverage{ grid-template-columns:1fr; } .gavgrera-coverage div{ min-height:125px; } .gavgrera-contact{ padding:25px 20px; } .gavgrera-contact-top h3{ font-size:25px; } .gavgrera-bottom-statement{ padding:26px 20px; } .gavgrera-bottom-statement h3{ font-size:24px; } .gavgrera-bottom-button{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .gavgrera-hero h1{ font-size:35px; } .gavgrera-hero h1 small{ font-size:21px; } .gavgrera-framework-head h2{ font-size:32px; } .gavgrera-practice-copy h2{ font-size:32px; } .gavgrera-matrix-card h3{ font-size:22px; } } /* ========================================================= NOIDA / GREATER NOIDA — UP RERA PROPERTY VALUATION UNIQUE NAMESPACE: ngurv- ROYAL BRAND PALETTE: Deep Navy #04152d Navy #061d3d Royal Navy #092f62 Gold #b97800 Gold #d99a16 Gold #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .ngurv-hero, .ngurv-framework, .ngurv-coverage{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .ngurv-hero *, .ngurv-framework *, .ngurv-coverage *{ box-sizing:border-box; } .ngurv-hero a, .ngurv-framework a, .ngurv-coverage a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .ngurv-hero{ padding:105px 0 90px; color:#ffffff; background: radial-gradient( circle at 85% 20%, rgba(240,180,41,.15), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .ngurv-hero-grid{ position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, transparent 0, transparent 9%, rgba(240,180,41,.045) 9.05%, transparent 9.1%, transparent 91%, rgba(240,180,41,.045) 91.05%, transparent 91.1% ); } .ngurv-hero-grid:before{ content:""; position:absolute; width:720px; height:720px; right:-410px; top:-300px; border:1px solid rgba(240,180,41,.13); border-radius:50%; } .ngurv-hero-grid:after{ content:""; position:absolute; width:480px; height:480px; right:-270px; top:-180px; border:1px solid rgba(240,180,41,.07); border-radius:50%; } .ngurv-hero-inner{ position:relative; z-index:2; max-width:1120px; margin:auto; text-align:center; } .ngurv-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:27px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.65px; line-height:1.5; } .ngurv-kicker span{ width:40px; height:2px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .ngurv-hero h1{ max-width:1000px; margin:0 auto; color:#ffffff; font-size:clamp(46px,6.5vw,78px); font-weight:750; line-height:1.02; letter-spacing:-3px; } .ngurv-hero h1 strong{ display:block; margin-top:10px; color:#f0b429; font-weight:750; } .ngurv-hero-lead{ max-width:850px; margin:31px auto 0; color:#dbe5ef; font-size:18px; line-height:1.8; } .ngurv-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= HERO LOCATION PANEL ========================================================= */ .ngurv-hero-location{ display:grid; grid-template-columns:1fr 160px; gap:30px; align-items:center; max-width:900px; margin:48px auto 0; padding:25px 28px; text-align:left; border:1px solid rgba(240,180,41,.22); border-radius:12px; background: linear-gradient( 135deg, rgba(255,255,255,.055), rgba(255,255,255,.015) ); } .ngurv-location-main > span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.3px; } .ngurv-location-main h2{ margin:0; color:#ffffff; font-size:27px; line-height:1.3; } .ngurv-location-main h2 strong{ color:#f0b429; } .ngurv-location-mark{ display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:105px; border-left:1px solid rgba(240,180,41,.25); text-align:center; } .ngurv-location-mark b{ color:#f0b429; font-size:37px; line-height:1; } .ngurv-location-mark span{ margin-top:5px; color:#ffffff; font-size:15px; font-weight:850; letter-spacing:2px; } /* ========================================================= HERO TAGS ========================================================= */ .ngurv-hero-tags{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:28px; } .ngurv-hero-tags span{ padding:9px 16px; border:1px solid rgba(240,180,41,.30); border-radius:50px; color:#e5edf5; background:rgba(255,255,255,.025); font-size:15px; font-weight:650; } /* ========================================================= SECTION LABEL ========================================================= */ .ngurv-section-label{ display:inline-flex; align-items:center; gap:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .ngurv-section-label:before{ content:""; width:34px; height:2px; background:#b97800; } .ngurv-label-light{ color:#f0b429; } .ngurv-label-light:before{ background:#f0b429; } /* ========================================================= SECTION 02 — FRAMEWORK ========================================================= */ .ngurv-framework{ padding:95px 0 100px; background: linear-gradient( 180deg, #ffffff 0%, #f5f8fb 100% ); } .ngurv-framework-head{ display:grid; grid-template-columns:1fr .85fr; gap:70px; align-items:end; margin-bottom:50px; } .ngurv-framework-head h2{ max-width:700px; margin:16px 0 0; color:#061d3d; font-size:clamp(38px,4.6vw,58px); line-height:1.07; letter-spacing:-1.8px; } .ngurv-framework-head h2 strong{ color:#b97800; } .ngurv-framework-head > p{ margin:0; color:#526276; font-size:16px; line-height:1.82; } /* ========================================================= FRAMEWORK GRID ========================================================= */ .ngurv-framework-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(9,47,98,.15); border-left:1px solid rgba(9,47,98,.15); } .ngurv-framework-card{ position:relative; min-height:285px; padding:29px; border-right:1px solid rgba(9,47,98,.15); border-bottom:1px solid rgba(9,47,98,.15); background:#ffffff; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } .ngurv-framework-card:hover{ z-index:2; background: linear-gradient( 145deg, #ffffff, #f8fbff ); transform:translateY(-4px); box-shadow: 0 18px 35px rgba(6,29,61,.09); } .ngurv-card-number{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:24px; border:1px solid rgba(185,120,0,.35); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .ngurv-framework-card > span{ display:block; margin-bottom:7px; color:#7d8998; font-size:15px; font-weight:850; letter-spacing:1.2px; } .ngurv-framework-card h3{ margin:0 0 11px; color:#061d3d; font-size:23px; line-height:1.3; } .ngurv-framework-card h3 strong{ color:#b97800; } .ngurv-framework-card p{ margin:0; color:#566577; font-size:15px; line-height:1.75; } .ngurv-framework-card p strong{ color:#092f62; font-weight:750; } /* ========================================================= FRAMEWORK NOTE ========================================================= */ .ngurv-framework-note{ display:flex; align-items:center; gap:17px; margin-top:30px; padding:20px 23px; border-left:3px solid #b97800; border-radius:0 8px 8px 0; background:#eef3f8; } .ngurv-note-mark{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border-radius:50%; color:#ffffff; background:#092f62; font-size:18px; font-weight:900; } .ngurv-framework-note p{ margin:0; color:#526276; font-size:15px; line-height:1.7; } .ngurv-framework-note strong{ color:#092f62; } /* ========================================================= SECTION 03 — COVERAGE ========================================================= */ .ngurv-coverage{ padding:95px 0; color:#ffffff; background: radial-gradient( circle at 80% 50%, rgba(240,180,41,.10), transparent 32% ), linear-gradient( 125deg, #04152d 0%, #061d3d 52%, #092f62 100% ); } .ngurv-coverage-pattern{ position:absolute; width:650px; height:650px; right:-330px; top:-90px; border:1px solid rgba(240,180,41,.10); border-radius:50%; } .ngurv-coverage-pattern:after{ content:""; position:absolute; inset:80px; border:1px solid rgba(240,180,41,.07); border-radius:50%; } .ngurv-coverage-layout{ position:relative; z-index:2; display:grid; grid-template-columns:1fr .72fr; gap:75px; align-items:center; } /* ========================================================= COVERAGE COPY ========================================================= */ .ngurv-coverage-copy h2{ max-width:700px; margin:17px 0 20px; color:#ffffff; font-size:clamp(38px,4.5vw,57px); line-height:1.08; letter-spacing:-1.6px; } .ngurv-coverage-copy h2 strong{ color:#f0b429; } .ngurv-coverage-copy > p{ max-width:720px; margin:0 0 32px; color:#d5e0eb; font-size:16px; line-height:1.82; } .ngurv-coverage-copy > p strong{ color:#ffffff; } /* ========================================================= AREA LIST ========================================================= */ .ngurv-area-list{ border-top:1px solid rgba(255,255,255,.14); } .ngurv-area-list > div{ display:grid; grid-template-columns:190px 1fr; gap:25px; padding:19px 0; border-bottom:1px solid rgba(255,255,255,.12); } .ngurv-area-list b{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:.8px; } .ngurv-area-list span{ color:#d3dfe9; font-size:15px; line-height:1.6; } /* ========================================================= CONTACT PANEL ========================================================= */ .ngurv-contact{ position:relative; padding:31px; border:1px solid rgba(240,180,41,.28); border-radius:13px; background: linear-gradient( 145deg, rgba(9,47,98,.95), rgba(4,21,45,.96) ); box-shadow: 0 25px 50px rgba(0,0,0,.25); } .ngurv-contact:before{ content:""; position:absolute; left:31px; top:0; width:85px; height:3px; background: linear-gradient( 90deg, #b97800, #f0b429 ); } .ngurv-contact-top > span{ display:block; margin-bottom:9px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .ngurv-contact-top h3{ margin:0 0 15px; color:#ffffff; font-size:29px; line-height:1.3; } .ngurv-contact-top h3 strong{ color:#f0b429; } .ngurv-contact-top p{ margin:0 0 25px; color:#cdd9e5; font-size:15px; line-height:1.7; } /* ========================================================= MAIN CTA ========================================================= */ .ngurv-main-cta{ display:flex; align-items:center; gap:13px; width:100%; min-height:68px; margin-bottom:11px; padding:11px 16px; border-radius:8px; color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 13px 30px rgba(0,0,0,.28); transition: transform .25s ease, box-shadow .25s ease; } .ngurv-main-cta:hover{ color:#04152d; transform:translateY(-2px); box-shadow: 0 17px 35px rgba(0,0,0,.32); } .ngurv-main-cta > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:50%; background:rgba(4,21,45,.13); font-size:19px; font-weight:900; } .ngurv-main-cta strong{ display:block; font-size:16px; line-height:1.3; } .ngurv-main-cta small{ display:block; margin-top:3px; font-size:15px; opacity:.75; } /* ========================================================= PHONE CTA ========================================================= */ .ngurv-phone-cta{ display:flex; align-items:center; gap:13px; width:100%; min-height:64px; padding:10px 16px; border:1px solid rgba(240,180,41,.50); border-radius:8px; color:#ffffff; background:rgba(255,255,255,.035); } .ngurv-phone-cta:hover{ color:#ffffff; border-color:#f0b429; background:rgba(255,255,255,.055); } .ngurv-phone-cta > span{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:50%; color:#f0b429; background:rgba(240,180,41,.10); font-size:18px; } .ngurv-phone-cta strong{ display:block; font-size:16px; } .ngurv-phone-cta small{ display:block; margin-top:3px; color:#c4d0dc; font-size:15px; } /* ========================================================= CONTACT FOOTER ========================================================= */ .ngurv-contact-footer{ margin-top:23px; padding-top:19px; border-top:1px solid rgba(255,255,255,.12); } .ngurv-contact-footer > span{ display:block; margin-bottom:6px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .ngurv-contact-footer p{ margin:0; color:#bfcdda; font-size:15px; line-height:1.6; } .ngurv-contact-footer strong{ color:#ffffff; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .ngurv-framework-grid{ grid-template-columns:repeat(2,1fr); } .ngurv-coverage-layout{ gap:45px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .ngurv-hero{ padding:80px 0 70px; } .ngurv-hero h1{ font-size:55px; } .ngurv-framework-head{ grid-template-columns:1fr; gap:25px; } .ngurv-coverage-layout{ grid-template-columns:1fr; gap:50px; } .ngurv-contact{ max-width:650px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .ngurv-hero{ padding:65px 0 55px; } .ngurv-kicker{ flex-wrap:wrap; font-size:15px; letter-spacing:1px; } .ngurv-hero h1{ font-size:40px; letter-spacing:-1.5px; } .ngurv-hero-lead{ font-size:16px; line-height:1.75; } .ngurv-hero-location{ grid-template-columns:1fr; gap:20px; padding:22px; } .ngurv-location-main h2{ font-size:24px; } .ngurv-location-mark{ min-height:80px; border-left:0; border-top:1px solid rgba(240,180,41,.22); padding-top:18px; } .ngurv-hero-tags{ justify-content:flex-start; } .ngurv-framework{ padding:65px 0 70px; } .ngurv-framework-head h2{ font-size:37px; } .ngurv-framework-head > p{ font-size:15px; } .ngurv-framework-grid{ grid-template-columns:1fr; } .ngurv-framework-card{ min-height:0; padding:26px; } .ngurv-framework-note{ align-items:flex-start; padding:18px; } .ngurv-coverage{ padding:65px 0; } .ngurv-coverage-copy h2{ font-size:37px; } .ngurv-coverage-copy > p{ font-size:15px; } .ngurv-area-list > div{ grid-template-columns:1fr; gap:6px; } .ngurv-contact{ padding:25px 20px; } .ngurv-contact-top h3{ font-size:25px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .ngurv-hero h1{ font-size:35px; } .ngurv-hero-lead{ font-size:15px; } .ngurv-framework-head h2{ font-size:32px; } .ngurv-framework-card h3{ font-size:21px; } .ngurv-coverage-copy h2{ font-size:32px; } } /* ========================================================= FARIDABAD & GHAZIABAD PROPERTY VALUATION UNIQUE NAMESPACE: fgvx- ROYAL BRAND COLORS #04152d #061d3d #092f62 #b97800 #d99a16 #f0b429 MINIMUM FONT SIZE: 15px ========================================================= */ /* ========================================================= FOUNDATION ========================================================= */ .fgvx-hero, .fgvx-context, .fgvx-services{ position:relative; width:100%; overflow:hidden; font-family:inherit; } .fgvx-hero *, .fgvx-context *, .fgvx-services *{ box-sizing:border-box; } .fgvx-hero a, .fgvx-context a, .fgvx-services a{ text-decoration:none; } /* ========================================================= SECTION 01 — HERO ========================================================= */ .fgvx-hero{ padding:105px 0 95px; color:#ffffff; background: radial-gradient( circle at 85% 18%, rgba(240,180,41,.15), transparent 30% ), linear-gradient( 135deg, #04152d 0%, #061d3d 55%, #092f62 100% ); } .fgvx-hero-orbit{ position:absolute; width:750px; height:750px; right:-380px; top:-250px; border:1px solid rgba(240,180,41,.13); border-radius:50%; } .fgvx-hero-orbit:before, .fgvx-hero-orbit:after{ content:""; position:absolute; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .fgvx-hero-orbit:before{ inset:80px; } .fgvx-hero-orbit:after{ inset:170px; } .fgvx-hero-layout{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:75px; align-items:center; } .fgvx-kicker{ display:flex; align-items:center; gap:11px; margin-bottom:24px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.5px; line-height:1.5; } .fgvx-kicker span{ width:35px; height:2px; background:#b97800; } .fgvx-hero h1{ max-width:750px; margin:0; color:#ffffff; font-size:clamp(48px,5.6vw,75px); line-height:1.02; letter-spacing:-2.8px; } .fgvx-hero h1 strong{ display:block; color:#f0b429; } .fgvx-hero h1 small{ display:block; max-width:650px; margin-top:21px; color:#d2dce7; font-size:22px; font-weight:450; line-height:1.45; letter-spacing:-.3px; } .fgvx-hero-lead{ max-width:720px; margin:30px 0 0; color:#d9e3ed; font-size:17px; line-height:1.82; } .fgvx-hero-lead strong{ color:#ffffff; font-weight:750; } /* ========================================================= LOCATION STRIP ========================================================= */ .fgvx-location-strip{ display:flex; align-items:center; max-width:570px; margin-top:35px; padding:18px 0; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); } .fgvx-location-strip > div:not(.fgvx-location-divider){ display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; } .fgvx-location-strip span{ grid-row:span 2; color:#b97800; font-size:15px; font-weight:900; } .fgvx-location-strip strong{ color:#ffffff; font-size:17px; line-height:1.2; } .fgvx-location-strip small{ color:#aebdcd; font-size:15px; } .fgvx-location-divider{ width:1px; height:43px; margin:0 30px; background:rgba(240,180,41,.25); } /* ========================================================= HERO BUTTONS ========================================================= */ .fgvx-hero-actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; } .fgvx-primary-btn, .fgvx-phone-btn{ display:flex; align-items:center; gap:11px; min-height:59px; padding:9px 18px; border-radius:8px; } .fgvx-primary-btn{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 30px rgba(0,0,0,.25); } .fgvx-primary-btn:hover{ color:#04152d; } .fgvx-phone-btn{ border:1px solid rgba(240,180,41,.50); color:#ffffff; background:rgba(255,255,255,.035); } .fgvx-phone-btn:hover{ color:#ffffff; border-color:#f0b429; } .fgvx-primary-btn span, .fgvx-phone-btn span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:18px; font-weight:800; } .fgvx-primary-btn span{ background:rgba(4,21,45,.12); } .fgvx-phone-btn span{ color:#f0b429; background:rgba(240,180,41,.11); } .fgvx-primary-btn strong, .fgvx-phone-btn strong{ font-size:16px; } .fgvx-phone-btn small{ color:#cbd7e3; font-size:15px; } /* ========================================================= HERO VISUAL ========================================================= */ .fgvx-hero-visual{ position:relative; min-height:560px; padding:25px; border:1px solid rgba(240,180,41,.20); border-radius:16px; background: linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.012) ); } .fgvx-visual-heading{ position:relative; z-index:4; display:flex; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10); } .fgvx-visual-heading span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .fgvx-visual-heading strong{ color:#ffffff; font-size:15px; } .fgvx-visual-heading i{ color:#f0b429; font-style:normal; margin:0 5px; } /* ========================================================= NCR STRUCTURE ========================================================= */ .fgvx-ncr-structure{ position:relative; min-height:390px; } .fgvx-city-node{ position:absolute; z-index:5; display:flex; flex-direction:column; min-width:165px; padding:14px 17px; border:1px solid rgba(240,180,41,.35); border-radius:9px; background:#061d3d; box-shadow:0 15px 30px rgba(0,0,0,.20); } .fgvx-city-node:after{ content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#f0b429; box-shadow:0 0 0 7px rgba(240,180,41,.10); } .fgvx-delhi-node{ top:45px; left:5%; } .fgvx-delhi-node:after{ right:-5px; top:50%; } .fgvx-faridabad-node{ right:4%; top:155px; } .fgvx-faridabad-node:after{ left:-5px; top:50%; } .fgvx-ghaziabad-node{ left:10%; bottom:30px; } .fgvx-ghaziabad-node:after{ right:-5px; top:50%; } .fgvx-city-node strong{ color:#ffffff; font-size:19px; } .fgvx-city-node small{ margin-top:4px; color:#aebdcd; font-size:15px; } /* ========================================================= CONNECTING LINES ========================================================= */ .fgvx-ncr-line{ position:absolute; height:1px; width:300px; top:118px; left:23%; transform:rotate(18deg); transform-origin:left center; background: linear-gradient( 90deg, #b97800, rgba(240,180,41,.05) ); } .fgvx-line-down{ top:260px; left:42%; width:240px; transform:rotate(145deg); } .fgvx-central-mark{ position:absolute; z-index:3; top:48%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; width:155px; height:155px; border:1px solid rgba(240,180,41,.42); border-radius:50%; background: radial-gradient( circle, rgba(240,180,41,.13), rgba(4,21,45,.94) 68% ); text-align:center; } .fgvx-central-mark span{ color:#f0b429; font-size:15px; font-weight:900; letter-spacing:2px; } .fgvx-central-mark strong{ margin-top:7px; color:#ffffff; font-size:15px; line-height:1.35; letter-spacing:1px; } /* ========================================================= VISUAL NOTE ========================================================= */ .fgvx-visual-note{ position:absolute; left:25px; right:25px; bottom:25px; padding:17px 19px; border-left:3px solid #f0b429; border-radius:0 8px 8px 0; background:rgba(4,21,45,.75); } .fgvx-visual-note span{ display:block; margin-bottom:4px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .fgvx-visual-note strong{ color:#ffffff; font-size:16px; } /* ========================================================= SECTION 02 — CONTEXT ========================================================= */ .fgvx-context{ padding:100px 0; background: linear-gradient( 180deg, #ffffff, #f4f7fa ); } .fgvx-context-header{ display:grid; grid-template-columns:1fr .85fr; gap:70px; align-items:end; margin-bottom:55px; } .fgvx-section-label{ display:inline-flex; align-items:center; gap:10px; color:#b97800; font-size:15px; font-weight:850; letter-spacing:1.5px; } .fgvx-section-label:before{ content:""; width:32px; height:2px; background:#b97800; } .fgvx-context-header h2{ max-width:760px; margin:17px 0 0; color:#061d3d; font-size:clamp(37px,4.5vw,58px); line-height:1.07; letter-spacing:-1.8px; } .fgvx-context-header h2 strong{ color:#b97800; } .fgvx-context-header > p{ margin:0; color:#566679; font-size:16px; line-height:1.82; } .fgvx-context-header > p strong{ color:#092f62; } /* ========================================================= CITY CARDS ========================================================= */ .fgvx-city-grid{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } .fgvx-city-card{ position:relative; overflow:hidden; border:1px solid rgba(9,47,98,.13); border-radius:13px; background:#ffffff; box-shadow: 0 15px 35px rgba(6,29,61,.07); } .fgvx-city-card:before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background: linear-gradient( 90deg, #b97800, #f0b429, #b97800 ); } .fgvx-card-top{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px 27px; border-bottom:1px solid rgba(9,47,98,.10); } .fgvx-card-top span{ color:#7a8795; font-size:15px; font-weight:850; letter-spacing:1.1px; } .fgvx-card-top b{ color:#b97800; font-size:16px; } .fgvx-card-body{ padding:29px 27px; } .fgvx-card-body h3{ margin:0 0 13px; color:#061d3d; font-size:29px; line-height:1.2; } .fgvx-card-body h3 strong{ color:#b97800; } .fgvx-card-body > p{ margin:0; color:#596a7c; font-size:15px; line-height:1.8; } .fgvx-card-body > p strong{ color:#092f62; } /* ========================================================= FOCUS LIST ========================================================= */ .fgvx-focus-list{ margin-top:25px; border-top:1px solid rgba(9,47,98,.10); } .fgvx-focus-list div{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid rgba(9,47,98,.08); } .fgvx-focus-list div:last-child{ border-bottom:0; } .fgvx-focus-list span{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border:1px solid rgba(185,120,0,.30); border-radius:50%; color:#b97800; font-size:15px; font-weight:900; } .fgvx-focus-list strong{ color:#243b54; font-size:15px; } /* ========================================================= CARD FOOTER ========================================================= */ .fgvx-card-footer{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:17px 27px; background:#061d3d; } .fgvx-card-footer span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1px; } .fgvx-card-footer strong{ color:#d5e0eb; font-size:15px; } /* ========================================================= MATRIX ========================================================= */ .fgvx-matrix{ display:grid; grid-template-columns:.7fr 1.3fr; gap:45px; align-items:center; margin-top:55px; padding:32px; border:1px solid rgba(185,120,0,.25); border-radius:13px; background: linear-gradient( 135deg, #04152d, #061d3d ); } .fgvx-matrix-heading > span{ color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .fgvx-matrix-heading h3{ margin:11px 0 0; color:#ffffff; font-size:28px; line-height:1.25; } .fgvx-matrix-heading h3 strong{ color:#f0b429; } .fgvx-matrix-items{ display:grid; grid-template-columns:repeat(4,1fr); } .fgvx-matrix-items div{ min-height:110px; padding:12px 15px; border-left:1px solid rgba(255,255,255,.12); } .fgvx-matrix-items b{ display:block; margin-bottom:13px; color:#b97800; font-size:15px; } .fgvx-matrix-items strong{ display:block; margin-bottom:5px; color:#ffffff; font-size:17px; } .fgvx-matrix-items span{ display:block; color:#b9c8d7; font-size:15px; line-height:1.45; } /* ========================================================= SECTION 03 — SERVICES ========================================================= */ .fgvx-services{ padding:100px 0 90px; color:#ffffff; background: linear-gradient( 135deg, #04152d, #061d3d 60%, #092f62 ); } .fgvx-services-orbit{ position:absolute; width:800px; height:800px; left:-550px; top:-250px; border:1px solid rgba(240,180,41,.08); border-radius:50%; } .fgvx-services-header{ position:relative; z-index:2; max-width:820px; margin:0 auto 50px; text-align:center; } .fgvx-light-label{ color:#f0b429; } .fgvx-services-header h2{ margin:17px 0 14px; color:#ffffff; font-size:clamp(37px,4.5vw,58px); line-height:1.07; letter-spacing:-1.6px; } .fgvx-services-header h2 strong{ color:#f0b429; } .fgvx-services-header p{ margin:0; color:#ccd8e4; font-size:16px; line-height:1.8; } /* ========================================================= PURPOSE GRID ========================================================= */ .fgvx-purpose-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.13); border-left:1px solid rgba(255,255,255,.13); } .fgvx-purpose{ min-height:220px; padding:25px; border-right:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); transition: background .25s ease, transform .25s ease; } .fgvx-purpose:hover{ background:rgba(240,180,41,.045); transform:translateY(-3px); } .fgvx-purpose > span{ display:block; margin-bottom:29px; color:#b97800; font-size:15px; font-weight:900; } .fgvx-purpose > strong{ display:block; margin-bottom:10px; color:#ffffff; font-size:21px; } .fgvx-purpose p{ margin:0; color:#bdcad7; font-size:15px; line-height:1.7; } .fgvx-purpose p strong{ color:#f0b429; } /* ========================================================= FINAL CTA ========================================================= */ .fgvx-final-cta{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:60px; padding:34px 37px; border:1px solid rgba(240,180,41,.27); border-radius:13px; background: linear-gradient( 120deg, rgba(255,255,255,.055), rgba(255,255,255,.015) ); } .fgvx-final-copy > span{ display:block; margin-bottom:8px; color:#f0b429; font-size:15px; font-weight:850; letter-spacing:1.2px; } .fgvx-final-copy h3{ max-width:700px; margin:0 0 9px; color:#ffffff; font-size:29px; line-height:1.3; } .fgvx-final-copy h3 strong{ color:#f0b429; } .fgvx-final-copy p{ max-width:700px; margin:0; color:#c7d3df; font-size:15px; line-height:1.7; } .fgvx-final-copy p strong{ color:#ffffff; } /* ========================================================= FINAL ACTIONS ========================================================= */ .fgvx-final-actions{ display:flex; flex-direction:column; gap:10px; min-width:245px; flex:none; } .fgvx-final-button, .fgvx-final-phone{ display:flex; align-items:center; gap:12px; min-height:60px; padding:9px 17px; border-radius:8px; } .fgvx-final-button{ color:#061d3d; background: linear-gradient( 135deg, #f0b429, #b97800 ); box-shadow: 0 12px 28px rgba(0,0,0,.23); } .fgvx-final-button:hover{ color:#04152d; } .fgvx-final-phone{ border:1px solid rgba(240,180,41,.50); color:#ffffff; background:rgba(255,255,255,.025); } .fgvx-final-phone:hover{ color:#ffffff; border-color:#f0b429; } .fgvx-final-button span, .fgvx-final-phone span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:18px; font-weight:800; } .fgvx-final-button span{ background:rgba(4,21,45,.12); } .fgvx-final-phone span{ color:#f0b429; background:rgba(240,180,41,.10); } .fgvx-final-button strong, .fgvx-final-phone strong{ font-size:16px; } .fgvx-final-phone small{ color:#c4d0dc; font-size:15px; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width:1199px){ .fgvx-hero-layout{ grid-template-columns:1fr .9fr; gap:45px; } .fgvx-hero h1{ font-size:57px; } .fgvx-hero-visual{ min-height:520px; } .fgvx-city-node{ min-width:145px; } .fgvx-ncr-line{ width:230px; } .fgvx-line-down{ width:190px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .fgvx-hero{ padding:80px 0 75px; } .fgvx-hero-layout{ grid-template-columns:1fr; gap:55px; } .fgvx-hero-content{ max-width:780px; margin:auto; } .fgvx-hero-visual{ width:100%; max-width:720px; margin:auto; } .fgvx-context{ padding:80px 0; } .fgvx-context-header{ grid-template-columns:1fr; gap:25px; } .fgvx-matrix{ grid-template-columns:1fr; gap:25px; } .fgvx-purpose-grid{ grid-template-columns:repeat(2,1fr); } .fgvx-final-cta{ align-items:flex-start; flex-direction:column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .fgvx-hero{ padding:65px 0; } .fgvx-kicker{ flex-wrap:wrap; font-size:15px; } .fgvx-hero h1{ font-size:40px; letter-spacing:-1.5px; } .fgvx-hero h1 small{ font-size:20px; } .fgvx-hero-lead{ font-size:15px; line-height:1.75; } .fgvx-location-strip{ align-items:flex-start; } .fgvx-location-divider{ margin:0 17px; } .fgvx-hero-actions{ flex-direction:column; align-items:stretch; } .fgvx-primary-btn, .fgvx-phone-btn{ width:100%; justify-content:center; } .fgvx-hero-visual{ min-height:470px; padding:18px; } .fgvx-visual-heading{ display:block; } .fgvx-visual-heading strong{ display:block; margin-top:7px; } .fgvx-ncr-structure{ min-height:335px; } .fgvx-city-node{ min-width:125px; padding:11px 12px; } .fgvx-city-node strong{ font-size:16px; } .fgvx-city-node small{ font-size:15px; } .fgvx-delhi-node{ top:30px; left:0; } .fgvx-faridabad-node{ top:125px; right:0; } .fgvx-ghaziabad-node{ left:2%; bottom:15px; } .fgvx-central-mark{ width:125px; height:125px; } .fgvx-ncr-line{ width:160px; left:27%; top:93px; } .fgvx-line-down{ width:135px; left:39%; top:218px; } .fgvx-central-mark strong{ font-size:15px; } .fgvx-visual-note{ left:18px; right:18px; bottom:18px; } .fgvx-context{ padding:65px 0; } .fgvx-context-header h2{ font-size:36px; } .fgvx-context-header > p{ font-size:15px; } .fgvx-city-grid{ grid-template-columns:1fr; } .fgvx-card-body{ padding:25px 20px; } .fgvx-card-top, .fgvx-card-footer{ padding-left:20px; padding-right:20px; } .fgvx-card-body h3{ font-size:25px; } .fgvx-matrix{ padding:25px 20px; } .fgvx-matrix-heading h3{ font-size:25px; } .fgvx-matrix-items{ grid-template-columns:repeat(2,1fr); } .fgvx-matrix-items div:nth-child(3){ border-left:0; } .fgvx-services{ padding:70px 0; } .fgvx-services-header h2{ font-size:37px; } .fgvx-services-header p{ font-size:15px; } .fgvx-purpose-grid{ grid-template-columns:1fr; } .fgvx-purpose{ min-height:170px; } .fgvx-final-cta{ padding:27px 20px; } .fgvx-final-copy h3{ font-size:25px; } .fgvx-final-actions{ width:100%; } .fgvx-final-button, .fgvx-final-phone{ width:100%; justify-content:center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .fgvx-hero h1{ font-size:35px; } .fgvx-hero h1 small{ font-size:19px; } .fgvx-location-strip{ display:block; } .fgvx-location-strip > div:not(.fgvx-location-divider){ margin-bottom:13px; } .fgvx-location-divider{ display:none; } .fgvx-hero-visual{ min-height:445px; } .fgvx-ncr-structure{ min-height:320px; } .fgvx-city-node{ min-width:115px; } .fgvx-central-mark{ width:110px; height:110px; } .fgvx-context-header h2{ font-size:31px; } .fgvx-card-top{ display:block; } .fgvx-card-top b{ display:block; margin-top:7px; } .fgvx-matrix-items{ grid-template-columns:1fr; } .fgvx-matrix-items div{ min-height:auto; border-left:0; border-bottom:1px solid rgba(255,255,255,.10); } .fgvx-matrix-items div:last-child{ border-bottom:0; } .fgvx-services-header h2{ font-size:31px; } }