*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Poppins,Arial,sans-serif;color:#25243a;background:#fff;font-size:16px;line-height:1.6;overflow-x:hidden}a{text-decoration:none;color:inherit}.top-progress{height:4px;position:fixed;top:0;left:0;background:#df1989;width:0;z-index:2000}header{height:112px;background:#15142f;color:#fff;position:sticky;top:0;z-index:999;box-shadow:0 8px 30px #09071c30}
.header-top{height:32px;background:#0f0e25;border-bottom:1px solid #ffffff12}
.header-top-inner{height:100%;max-width:1400px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#aaa8bb}
.header-contact{display:flex;align-items:center;gap:24px}
.header-contact a{color:#e9e7ef;font-size:10px;font-weight:600;transition:.25s}
.header-contact a:hover{color:#ef45aa}
.header-main{height:80px;padding:0 5%;display:flex;align-items:center;gap:28px;max-width:1500px;margin:auto}
.logo{width:82px;height:82px;border-radius:50%;background:linear-gradient(145deg,#e72aa2,#ad0683);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:1;box-shadow:0 7px 24px #0006;flex:none;transform:translateY(8px);transition:.35s}
.logo:hover{transform:translateY(8px) scale(1.04)}
.logo .roof{font-size:27px}.logo strong{font-size:23px;letter-spacing:1px}.logo small{font-size:6px;letter-spacing:2px}
nav{display:flex;align-items:center;justify-content:center;gap:24px;flex:1}
nav a{font-size:12px;font-weight:600;color:#e8e7f0;position:relative;padding:31px 0;white-space:nowrap}
nav a:hover,nav .active{color:#ee43ae}
nav .active:after{content:"";position:absolute;height:3px;background:#e62394;width:100%;left:0;bottom:12px;border-radius:5px;box-shadow:0 0 10px #e6239466}
.header-actions{display:flex;gap:10px}
.outline-btn{padding:11px 17px;background:transparent;color:#fff;border:1px solid #e845a9;border-radius:5px;font-size:11px;font-weight:700;transition:.3s}
.outline-btn b{margin-left:8px}
.outline-btn:hover{background:#e62595;transform:translateY(-2px);box-shadow:0 8px 20px #e6259540}
.mobile-menu{display:none;background:none;border:0;color:#fff;font-size:28px;margin-left:auto}
.hero{min-height:650px;position:relative;display:flex;align-items:center;padding:60px 7%;overflow:hidden}.hero-slides,.hero-slide{position:absolute;inset:0}.hero-slide{background-position:center;background-size:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 7s ease}.hero-slide.active{opacity:1;transform:scale(1)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#101226f2 0%,#111426c8 48%,#11142635 100%)}.hero-content{position:relative;z-index:2;color:#fff;max-width:720px;animation:heroIn .9s ease}.eyebrow,.section-tag{color:#e94aab;font-size:12px;font-weight:800;letter-spacing:1.6px;margin-bottom:7px}.hero h1{font-size:52px;line-height:1.12;margin-bottom:16px;letter-spacing:-1px;text-shadow:0 5px 25px #0005}.hero h1 span,h2 span{color:#e83a9e}.hero-content>p{font-size:17px;line-height:1.85;max-width:610px;color:#eeeef4}.feature-pills{display:flex;gap:9px;flex-wrap:wrap;margin:27px 0}.feature-pills span{background:#ffffff1c;border:1px solid #ffffff30;padding:9px 14px;border-radius:5px;font-size:11px;font-weight:600;backdrop-filter:blur(5px)}.hero-buttons{display:flex;gap:13px;margin-top:27px}.hero-reassurance{display:flex;align-items:center;gap:8px;margin-top:15px;font-size:10px;color:#d7d5df}.reassure-dot{width:7px;height:7px;border-radius:50%;background:#e83a9e;box-shadow:0 0 0 0 #e83a9e;animation:reassurePulse 2s infinite}.pink-btn,.dark-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 27px;border-radius:5px;font-weight:700;font-size:13px;border:1px solid #e62a99;transition:.35s;background:linear-gradient(100deg,#e7178d,#c60078);color:#fff}.pink-btn:hover{transform:translateY(-4px);box-shadow:0 12px 28px #e71b8b66}.dark-btn{background:#15152dc9;border-color:#777}.dark-btn:hover{transform:translateY(-4px);background:#28264a}#callback{scroll-margin-top:130px}
.callback-card{position:absolute;z-index:3;right:7%;top:42px;width:340px;background:#fffffff7;border:1px solid #ffffff;border-radius:14px;padding:24px;color:#363448;box-shadow:0 24px 55px #00000055;animation:callbackFloat 4s ease-in-out infinite;overflow:hidden}
.callback-card:before{content:"";position:absolute;inset:-2px;border-radius:15px;padding:2px;background:linear-gradient(120deg,transparent,#e72aa2,#fff,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:callbackShimmer 3.5s linear infinite;pointer-events:none}
.callback-card h3{text-align:center;font-size:20px;position:relative}.callback-card h3 span{color:#d7248e}.callback-card>p{text-align:center;font-size:10px;color:#777;margin:4px 0 14px;position:relative}
.callback-badge{display:table;margin:0 auto 8px;background:#fce5f3;color:#d21d88;padding:5px 9px;border-radius:20px;font-size:8px;font-weight:800;letter-spacing:1px}
.callback-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.callback-card input,.callback-card select,.callback-card textarea{width:100%;border:1px solid #dfe0e8;border-radius:6px;background:#fafbfc;padding:10px 11px;margin:0;font:10px Poppins;color:#555;outline-color:#dd1b90}
.callback-card textarea{height:56px;resize:none;margin-top:8px;position:relative}.callback-submit{width:100%;border:0;margin-top:10px;padding:13px}
.callback-card small{display:block;text-align:center;color:#8c8b97;font-size:8px;margin-top:9px;position:relative}.hero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:8px}.dot{width:9px;height:9px;border-radius:50%;border:0;background:#fff8;cursor:pointer;transition:.3s}.dot.active{width:28px;border-radius:8px;background:#e82798}.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 7px 20px #1e19300d;background:#fff;padding:17px 7%;gap:20px}.trust-bar div{padding-left:15px;border-left:3px solid #e52b96;font-size:20px;color:#df258f}.trust-bar b{font-size:13px;color:#333;display:block}.trust-bar span{font-size:10px;color:#777;display:block}
.section{padding:55px 7%}.section-heading{text-align:center;margin-bottom:30px}.section-heading h2,.projects h2,.why h2,.loan h2,.benefits h2,.plot-copy h2{font-size:31px;line-height:1.25}.section-heading>p:last-child,.projects-head p,.loan-top p,.plot-copy>p{font-size:13px;color:#656478;margin-top:5px}.directions{background:linear-gradient(110deg,#fff,#f7f8fc)}.direction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;max-width:1150px;margin:auto}.direction-card{background:#fff;padding:23px 18px;text-align:center;border:1px solid #edf0f5;box-shadow:0 7px 20px #24203c0b;border-radius:8px;transition:.4s}.direction-card:hover{transform:translateY(-10px) rotateX(3deg);box-shadow:0 18px 35px #da218944}.dir-icon{width:57px;height:57px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;font-size:28px}.east{background:#f9e3f3;color:#dc2993}.west{background:#fff0d6;color:#ee9900}.north{background:#ddf5e6;color:#13934b}.south{background:#e2f0fa;color:#2877a6}.direction-card h3{font-size:16px}.direction-card p{font-size:11px;color:#777;margin:7px 0 10px;min-height:35px}.direction-card a{font-size:11px;font-weight:700;color:#df198b}.projects-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.view-all{border:1px solid #e4e5ed;padding:11px 18px;color:#dd218d;font-size:12px;font-weight:700;border-radius:5px;transition:.3s}.view-all:hover{background:#e82798;color:#fff}.project-wrap{position:relative}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;overflow:hidden}.project{border:1px solid #e4e5ed;border-radius:8px;overflow:hidden;background:#fff;transition:.4s}.project:hover{transform:translateY(-9px);box-shadow:0 18px 35px #21183222}.project-img{height:160px;background-size:cover;background-position:center;position:relative;transition:.5s}.project:hover .project-img{transform:scale(1.05)}.project{overflow:hidden}.tag{position:absolute;top:9px;left:9px;padding:5px 9px;color:#fff;font-size:9px;border-radius:4px;background:#1fa359}.upcoming{background:#f29a0d}.project-body{padding:12px}.project h3{font-size:16px}.location{font-size:10px;color:#89889a;margin:3px 0 11px}.project-meta{display:flex;justify-content:space-between;font-size:9px;color:#9a98a6;margin-bottom:12px}.project-meta b{display:block;color:#d92591;font-size:11px;margin-top:2px}.details-btn{display:block;border:2px solid #f0a6d3;color:#dc218b;padding:7px;text-align:center;border-radius:5px;font-size:11px;font-weight:700;transition:.3s}.details-btn:hover{background:#e82798;color:#fff}.slider-arrow{position:absolute;top:50%;z-index:2;width:35px;height:35px;border-radius:50%;border:1px solid #ddd;background:#fff;font-size:29px;color:#444;cursor:pointer}.left{left:-48px}.right{right:-48px}.plot-info{padding:55px 7%;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;background:#faf8fc}.plot-image{height:390px;border-radius:12px;background:url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&w=1200&q=85') center/cover;box-shadow:20px 20px 0 #f5d4e8}.plot-copy h2{margin-bottom:15px}.plot-copy>p{font-size:14px;margin-bottom:20px}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:25px}.check-grid div{font-size:13px;font-weight:600;color:#555}.check-grid div::first-letter{color:#e52b96}.amenities{background:#181334;color:#fff;padding:42px 7%}.amenities-inner{display:grid;grid-template-columns:1.5fr .8fr;gap:45px;align-items:center}.amenities h2{font-size:30px}.amenities-copy>p{font-size:13px;color:#c8c4d3;margin:6px 0 17px}.amenity-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.amenity-grid span{height:95px;background:#ffffff0d;border:1px solid #ffffff10;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ee65b4;font-size:26px;transition:.35s}.amenity-grid span:hover{transform:translateY(-7px);background:#ffffff1c}.amenity-grid small{font-size:9px;color:#fff;text-align:center;margin-top:6px}.amenity-video{height:180px;border-radius:16px;border:1px solid #ffffff44;background:url('https://images.unsplash.com/photo-1519331379826-f10be5486c6f?auto=format&fit=crop&w=1000&q=85') center/cover;display:grid;place-items:center;position:relative}.amenity-video span{position:absolute;bottom:15px;font-weight:600}.play{width:53px;height:53px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-size:20px;animation:pulse 1.8s infinite}.why{display:grid;grid-template-columns:1fr .9fr 1fr;align-items:center;gap:30px}.why ul{list-style:none;margin:16px 0}.why li{font-size:13px;margin:9px 0;color:#666}.why li:before{content:"✓";color:#e62392;margin-right:8px;font-weight:bold}.axis-orb{display:grid;place-items:center}.orb-ring{width:280px;height:280px;border-radius:50%;border:1px dashed #ef8ac8;display:grid;place-items:center;position:relative;animation:spin 18s linear infinite}.orb{width:165px;height:165px;border-radius:50%;background:linear-gradient(145deg,#ed32a6,#bb057d);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.orb b{font-size:31px;line-height:1}.orb small{font-size:6px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.stat-grid div{padding:20px;background:#fff;border:1px solid #ececf1;border-radius:8px;text-align:center;box-shadow:0 5px 17px #2a22300b;transition:.35s}.stat-grid div:hover{transform:scale(1.05);border-color:#ec73ba}.stat-grid b{display:block;font-size:30px;color:#993c9b}.stat-grid span{font-size:10px;color:#777}.loan{background:linear-gradient(90deg,#fff8fc,#f7f5ff)}.loan-top{display:flex;align-items:center;gap:13px}.loan-top .pink-btn{margin-left:auto}.banks{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:20px}.banks div{background:#fff;border:1px solid #e6e6eb;padding:16px;text-align:center;border-radius:6px;font-size:18px;font-weight:800;color:#325d8d;box-shadow:0 2px 9px #0000000a;transition:.3s}.banks div:hover{transform:translateY(-5px)}.loan-features{display:flex;justify-content:flex-end;gap:24px;color:#6e5b79;font-size:11px;margin-top:10px}.benefits{padding-top:30px;padding-bottom:30px}.benefit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:12px}.benefit-grid div{border:1px solid #eee;border-radius:6px;padding:15px;display:flex;align-items:center;gap:10px;color:#e42b94;font-size:26px;transition:.35s}.benefit-grid div:hover{transform:translateY(-6px);box-shadow:0 12px 25px #00000013}.benefit-grid b{font-size:10px;color:#555;line-height:1.5}.cta{min-height:130px;background:#181330;color:#fff;padding:0 7%;display:grid;grid-template-columns:200px 1fr 300px;align-items:center;gap:30px}.family-photo{height:130px;background:url('https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=700&q=80') center/cover}.cta h2{font-size:23px;line-height:1.3}.cta p{font-size:11px;color:#d2cfda;margin-top:7px}.cta-action p{font-size:16px;color:#fff}.cta-action small{font-size:10px}.testimonials{padding-top:38px}.testimonial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.testimonial-grid article{border:1px solid #e9e9ef;padding:18px;border-radius:7px;box-shadow:0 5px 16px #00000008;color:#df298f;font-size:19px;transition:.35s}.testimonial-grid article:hover{transform:translateY(-7px)}.testimonial-grid article>p{font-size:11px;color:#555;line-height:1.8;margin:8px 0 14px}.person{display:flex;align-items:center;gap:9px;color:#333}.person span{font-size:22px}.person b{font-size:10px}.person small{display:block;font-size:8px;color:#888;font-weight:400}footer{background:#17132f;color:#fff;padding:35px 7% 12px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr 1.3fr;gap:28px}.footer-logo{width:68px;height:68px}.footer-logo strong{font-size:19px}.footer-grid p,.footer-grid a{font-size:10px;color:#bbb7c9;display:block;margin:8px 0;line-height:1.7}.footer-grid h3{font-size:14px;margin-bottom:9px}.socials{display:flex;gap:8px}.socials a{width:24px;height:24px;border-radius:50%;background:#da208e;color:#fff!important;display:grid;place-items:center;margin:0}.copyright{border-top:1px solid #ffffff1c;margin-top:18px;padding-top:11px;display:flex;justify-content:space-between;color:#9894aa;font-size:8px}.floating{position:fixed;right:8px;top:42%;z-index:10;display:flex;flex-direction:column}.floating a{width:38px;height:38px;margin:1px;display:grid;place-items:center;background:#22b765;color:#fff;font-size:18px}.floating a:nth-child(2){background:#d7198d}.floating a:nth-child(3){background:#2574bb}#backTop{position:fixed;bottom:18px;right:18px;border:0;width:38px;height:38px;border-radius:50%;background:#fff;color:#d6208d;box-shadow:0 3px 12px #0003;display:none;z-index:10;font-size:18px;cursor:pointer}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,100px);background:#181330;color:#fff;padding:15px 24px;border-radius:6px;z-index:1000;transition:.4s;font-size:13px}#toast.show{transform:translate(-50%,0)}.reveal{opacity:0;transform:translateY(45px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}.stagger{opacity:0;transform:translateY(30px)}.visible .stagger{animation:cardIn .65s forwards}.visible .stagger:nth-child(2){animation-delay:.12s}.visible .stagger:nth-child(3){animation-delay:.24s}.visible .stagger:nth-child(4){animation-delay:.36s}@keyframes heroIn{from{opacity:0;transform:translateX(-35px)}to{opacity:1;transform:none}}@keyframes cardIn{to{opacity:1;transform:none}}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #fff5}50%{box-shadow:0 0 0 14px #fff0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes callbackFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes callbackShimmer{to{transform:rotate(360deg)}}@keyframes reassurePulse{0%{box-shadow:0 0 0 0 #e83a9e88}70%{box-shadow:0 0 0 8px #e83a9e00}100%{box-shadow:0 0 0 0 #e83a9e00}}.anchor-offset{display:block;position:relative;top:-120px;visibility:hidden}
@media(max-width:1100px){nav{gap:13px}.header-actions{display:none}.callback-card{right:3%;width:320px}.project-grid{grid-template-columns:repeat(2,1fr)}.amenity-grid{grid-template-columns:repeat(4,1fr)}.benefit-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){header{height:112px;background:#15142f;color:#fff;position:sticky;top:0;z-index:999;box-shadow:0 8px 30px #09071c30}
.header-top{height:32px;background:#0f0e25;border-bottom:1px solid #ffffff12}
.header-top-inner{height:100%;max-width:1400px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#aaa8bb}
.header-contact{display:flex;align-items:center;gap:24px}
.header-contact a{color:#e9e7ef;font-size:10px;font-weight:600;transition:.25s}
.header-contact a:hover{color:#ef45aa}
.header-main{height:80px;padding:0 5%;display:flex;align-items:center;gap:28px;max-width:1500px;margin:auto}
.logo{width:82px;height:82px;border-radius:50%;background:linear-gradient(145deg,#e72aa2,#ad0683);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:1;box-shadow:0 7px 24px #0006;flex:none;transform:translateY(8px);transition:.35s}
.logo:hover{transform:translateY(8px) scale(1.04)}
.logo .roof{font-size:27px}.logo strong{font-size:23px;letter-spacing:1px}.logo small{font-size:6px;letter-spacing:2px}
nav{display:flex;align-items:center;justify-content:center;gap:24px;flex:1}
nav a{font-size:12px;font-weight:600;color:#e8e7f0;position:relative;padding:31px 0;white-space:nowrap}
nav a:hover,nav .active{color:#ee43ae}
nav .active:after{content:"";position:absolute;height:3px;background:#e62394;width:100%;left:0;bottom:12px;border-radius:5px;box-shadow:0 0 10px #e6239466}
.header-actions{display:flex;gap:10px}
.outline-btn{padding:11px 17px;background:transparent;color:#fff;border:1px solid #e845a9;border-radius:5px;font-size:11px;font-weight:700;transition:.3s}
.outline-btn b{margin-left:8px}
.outline-btn:hover{background:#e62595;transform:translateY(-2px);box-shadow:0 8px 20px #e6259540}
.mobile-menu{display:none;background:none;border:0;color:#fff;font-size:28px;margin-left:auto}nav{display:none;position:absolute;top:68px;left:0;width:100%;background:#17132f;flex-direction:column;padding:10px}nav.open{display:flex}nav a{padding:9px}.hero{padding:45px 22px 25px;display:block}.hero h1{font-size:39px}.callback-card{position:relative;top:auto;right:auto;width:100%;margin-top:28px}.hero-stats{grid-template-columns:repeat(2,1fr)}.trust-bar,.direction-grid{grid-template-columns:repeat(2,1fr)}.section,.plot-info{padding:40px 22px}.plot-info,.why,.amenities-inner{grid-template-columns:1fr}.projects-head,.loan-top{align-items:flex-start;flex-direction:column}.loan-top .pink-btn{margin:7px 0}.amenities-inner{gap:25px}.why{text-align:center}.why ul{text-align:left}.plot-image{height:280px}.loan-features{justify-content:flex-start;flex-wrap:wrap}.banks{grid-template-columns:1fr 1fr}.cta{grid-template-columns:1fr;padding:25px 22px;gap:15px}.family-photo{display:none}.footer-grid{grid-template-columns:1fr 1fr}.testimonial-grid{grid-template-columns:1fr 1fr}.slider-arrow{display:none}}@media(max-width:520px){body{font-size:15px}.hero h1{font-size:32px}.hero-content>p{font-size:15px}.direction-grid,.project-grid,.testimonial-grid,.trust-bar{grid-template-columns:1fr}.project-grid{gap:15px}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats div:nth-child(2){border-right:0}.section-heading h2,.projects h2,.why h2,.loan h2,.benefits h2,.plot-copy h2{font-size:25px}.footer-grid{grid-template-columns:1fr}.copyright{flex-direction:column;gap:6px}.floating{display:none}.check-grid{grid-template-columns:1fr}.benefit-grid{grid-template-columns:1fr 1fr}.amenity-grid{grid-template-columns:repeat(2,1fr)}.banks{grid-template-columns:1fr}.hero-dots{bottom:12px}.callback-fields{grid-template-columns:1fr}}
/* =========================================================
AXIS DEVELOPERS — PREMIUM UI IMPROVEMENTS
========================================================= */
/* 1. Larger typography and more breathing room */
body{
font-size:18px;
line-height:1.75;
}
.header-top-inner,.header-contact a{font-size:12px}
nav{gap:30px;justify-content:flex-end}
nav a{font-size:14px}
.logo strong{font-size:25px}
.logo small{font-size:7px}
.section{padding:90px 7%}
.section-heading{margin-bottom:48px}
.section-heading h2,.projects h2,.why h2,.loan h2,.benefits h2,.plot-copy h2{
font-size:42px;
}
.section-heading>p:last-child,.projects-head p,.loan-top p,.plot-copy>p{
font-size:17px;
line-height:1.8;
}
.section-tag,.eyebrow{font-size:14px;letter-spacing:2px}
.hero{min-height:760px;padding:90px 7%}
.hero h1{font-size:68px}
.hero-content>p{font-size:20px;line-height:1.8}
.hero-buttons .pink-btn,.hero-buttons .dark-btn,.pink-btn,.dark-btn{
font-size:15px;
padding:16px 30px;
}
.direction-grid{max-width:1250px;gap:24px}
.direction-card{padding:34px 25px;min-height:280px}
.direction-card h3{font-size:21px}
.direction-card p{font-size:15px;min-height:60px}
.direction-card a{font-size:14px}
/* 2. Hero plot images — stronger cinematic presentation */
.hero-slide{
background-position:center center;
background-size:cover;
}
.hero-overlay{
background:linear-gradient(90deg,rgba(10,10,28,.93) 0%,rgba(16,18,38,.72) 46%,rgba(16,18,38,.12) 100%);
}
/* 4. Premium project cards and larger amenities */
.project-grid{gap:20px}
.project-img{height:230px}
.project-body{padding:20px}
.project h3{font-size:21px}
.location{font-size:13px}
.project-meta{font-size:12px}
.project-meta b{font-size:14px}
.details-btn{font-size:13px;padding:10px}
.amenities{
padding:90px 7%;
}
.amenities-inner{gap:65px}
.amenities h2{font-size:44px}
.amenities-copy>p{font-size:17px;line-height:1.8}
.amenity-grid-large{
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.amenity-grid-large span{
height:145px;
border-radius:14px;
font-size:42px;
background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
}
.amenity-grid-large small{font-size:13px;line-height:1.35}
.amenity-video{height:340px}
/* 8. Reworked trust section */
.trust-bar{
grid-template-columns:repeat(4,1fr);
padding:34px 7%;
gap:18px;
background:linear-gradient(135deg,#fff,#faf7fb);
box-shadow:0 12px 35px rgba(25,18,45,.08);
}
.trust-item{
min-height:125px;
padding:22px;
border:1px solid #eee4ec;
border-radius:18px;
background:#fff;
display:flex;
align-items:center;
gap:18px;
box-shadow:0 10px 30px rgba(28,18,45,.06);
transition:.35s;
}
.trust-item:hover{transform:translateY(-7px);border-color:#ef9aca}
.trust-icon{
width:62px;height:62px;flex:0 0 62px;
display:grid;place-items:center;
border-radius:18px;
color:#fff;
font-size:28px;font-weight:800;
background:linear-gradient(145deg,#ec2ca4,#9d096f);
box-shadow:0 10px 24px rgba(214,31,139,.25);
}
.trust-item b{display:block;font-size:18px;color:#29253c;line-height:1.3}
.trust-item div span{display:block;font-size:13px;color:#777;margin-top:5px}
/* 9. Different Why Axis layout */
.why{
grid-template-columns:1.05fr 1.15fr .8fr;
grid-template-areas:
"intro timeline visual"
"stats stats visual";
gap:55px;
background:
radial-gradient(circle at 85% 20%,#f9dff0 0,transparent 28%),
#fbfafc;
}
.why-intro{grid-area:intro}
.why-intro h2{font-size:48px;margin-bottom:18px}
.why-intro>p:not(.section-tag){font-size:17px;color:#686677;line-height:1.9;margin-bottom:26px}
.why-timeline{grid-area:timeline;display:grid;gap:14px}
.why-timeline article{
display:flex;gap:18px;padding:20px 22px;
background:#fff;border:1px solid #ece9ef;border-radius:16px;
box-shadow:0 8px 25px rgba(31,22,45,.05);
transition:.35s;
}
.why-timeline article:hover{transform:translateX(7px);border-color:#e982bd}
.why-timeline article>span{
color:#df208e;font-weight:800;font-size:18px;min-width:32px;
}
.why-timeline h3{font-size:18px;color:#2a2639}
.why-timeline p{font-size:14px;color:#777;margin-top:3px}
.why-visual{grid-area:visual;position:relative;min-height:520px}
.why-image{
position:absolute;inset:0 0 45px 30px;border-radius:28px;
background:url('img1.png') center/cover;
box-shadow:18px 18px 0 #f2d5e8;
}
.why-badge{
position:absolute;left:0;bottom:0;width:180px;height:180px;border-radius:50%;
background:linear-gradient(145deg,#ed2ba4,#9f086e);
color:#fff;display:grid;place-items:center;align-content:center;
box-shadow:0 20px 45px rgba(151,8,105,.28);
text-align:center;
}
.why-badge strong{font-size:35px;line-height:1}
.why-badge span{font-size:10px;margin-top:7px}
.stat-grid{grid-area:stats;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-grid div{padding:25px}
.stat-grid b{font-size:38px}
.stat-grid span{font-size:13px}
/* 10. Bank logos sliding right-to-left */
.loan {
padding-top: 90px;
padding-bottom: 90px;
}
.bank-marquee {
overflow: hidden;
margin-top: 35px;
padding: 10px 0 22px;
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bank-track {
display: flex;
width: max-content;
gap: 18px;
animation: bankScroll 10s linear infinite;
}
.bank-marquee:hover .bank-track {
animation-play-state: paused;
}
.bank-logo {
width: 220px;
height: 110px;
background: #ffffff;
border: 1px solid #e6e3ea;
border-radius: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(30, 20, 45, 0.07);
flex: none;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
padding: 8px;
}
/* SVG Icon Sizing and Alignment */
.bank-svg-icon {
width: 32px;
height: 32px;
margin-bottom: 6px;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.bank-logo:hover {
transform: translateY(-6px);
border-color: #e58abb;
box-shadow: 0 15px 30px rgba(229, 138, 187, 0.2);
}
.bank-logo:hover .bank-svg-icon {
transform: scale(1.1);
}
/* Ensure SVG/PNG logos fit within the cards cleanly */
.bank-img-logo {
max-width: 140px;
max-height: 45px;
width: auto;
height: auto;
object-fit: contain;
margin-bottom: 8px;
}
/* Scale effect on card hover */
.bank-logo:hover .bank-img-logo {
transform: scale(1.08);
}
.bank-logo strong {
font-size: 18px;
letter-spacing: 0.5px;
color: #283d68;
line-height: 1.1;
text-align: center;
}
.bank-logo span {
font-size: 11px;
color: #858391;
margin-top: 4px;
text-align: center;
padding: 0 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@keyframes bankScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* 5. Delayed enquiry popup */
.enquiry-popup{
position:fixed;inset:0;z-index:3000;
display:flex;align-items:center;justify-content:center;
padding:25px;opacity:0;visibility:hidden;
transition:.35s ease;
}
.enquiry-popup.show{opacity:1;visibility:visible}
.enquiry-backdrop{position:absolute;inset:0;background:rgba(10,8,25,.72);backdrop-filter:blur(7px)}
.enquiry-modal{position:relative;z-index:1;width:min(450px,100%);transform:translateY(25px) scale(.96);transition:.4s}
.enquiry-popup.show .enquiry-modal{transform:none}
.enquiry-modal .callback-card{
position:relative;top:auto;right:auto;width:100%;
animation:none;box-shadow:0 35px 90px rgba(0,0,0,.4);
}
.popup-close{
position:absolute;right:14px;top:12px;z-index:5;
width:36px;height:36px;border:0;border-radius:50%;
background:#18152f;color:#fff;font-size:25px;line-height:1;cursor:pointer;
}
.popup-close:hover{background:#e52394}
.enquiry-modal .callback-card h3{font-size:24px}
.enquiry-modal .callback-card>p{font-size:12px}
.enquiry-modal .callback-card input,
.enquiry-modal .callback-card select,
.enquiry-modal .callback-card textarea{font-size:12px;padding:12px}
/* 7. Modern sticky contact rail */
.floating-contact{
position:fixed;right:0;top:43%;z-index:1500;
display:flex;flex-direction:column;gap:8px;
padding:9px 8px 9px 10px;
background:rgba(255,255,255,.94);
border:1px solid #eee7ef;
border-right:0;
border-radius:18px 0 0 18px;
box-shadow:0 15px 40px rgba(25,18,45,.16);
backdrop-filter:blur(12px);
}
.floating-label{
writing-mode:vertical-rl;
transform:rotate(180deg);
color:#9d2a7d;font-size:9px;font-weight:800;
letter-spacing:2px;
margin:auto;
padding:4px 0 7px;
}
.floating-contact a{
width:54px;height:58px;border-radius:14px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2px;color:#fff;
background:linear-gradient(145deg,#e9289e,#a20873);
box-shadow:0 8px 20px rgba(205,25,134,.25);
transition:.3s;
}
.floating-contact a:hover{transform:translateX(-5px) scale(1.04)}
.floating-contact a:nth-of-type(2){background:linear-gradient(145deg,#242143,#15132f)}
.floating-contact a:nth-of-type(3){background:linear-gradient(145deg,#7d3ba7,#52206f)}
.floating-contact span{font-size:21px;line-height:1}
.floating-contact b{font-size:9px;font-weight:700}
/* Mobile enquiry button */
#mobileEnquiry{
display:none;position:fixed;left:16px;bottom:18px;z-index:1499;
border:0;border-radius:30px;padding:12px 18px;
color:#fff;background:linear-gradient(100deg,#e7178d,#9f086f);
box-shadow:0 10px 28px rgba(203,21,132,.35);
font-weight:800;
}
/* ==================== BENEFITS NEW DESIGN ==================== */
.benefits {
padding: 85px 7%;
background: #fdfbfd;
position: relative;
}
.section-heading {
text-align: center;
margin-bottom: 50px;
}
.section-tag {
font-size: 13px;
font-weight: 700;
color: #e58abb;
letter-spacing: 1px;
background: rgba(229, 138, 187, 0.12);
padding: 6px 16px;
border-radius: 30px;
display: inline-block;
margin-bottom: 10px;
}
.benefits h2 {
font-size: 36px;
color: #1e142d;
font-weight: 800;
}
.benefits h2 span {
color: #e7178d;
}
/* Grid Layout */
.benefit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1100px;
margin: 0 auto;
}
/* Modern Card */
.benefit-card {
background: #ffffff;
border: 1px solid #f0ecf4;
border-radius: 20px;
padding: 28px 24px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 10px 30px rgba(30, 20, 45, 0.04);
transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
position: relative;
overflow: hidden;
}
/* Left Border Highlight on Hover */
.benefit-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #e58abb, #283d68);
opacity: 0;
transition: opacity 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 35px rgba(229, 138, 187, 0.15);
border-color: rgba(229, 138, 187, 0.3);
}
.benefit-card:hover::before {
opacity: 1;
}
/* Icon Container */
.icon-box {
width: 56px;
height: 56px;
min-width: 56px;
background: linear-gradient(135deg, #f8eff4 0%, #edf1f7 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #283d68;
transition: all 0.3s ease;
}
.benefit-card:hover .icon-box {
background: linear-gradient(135deg, #e58abb 0%, #283d68 100%);
color: #ffffff;
transform: scale(1.05);
}
/* Typography */
.card-content b {
font-size: 16px;
color: #283d68;
line-height: 1.4;
font-weight: 700;
display: block;
}
/* Responsive */
@media (max-width: 992px) {
.benefit-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.benefit-grid {
grid-template-columns: 1fr;
}
.benefits h2 {
font-size: 28px;
}
}
/* Responsive */
@media(max-width:1100px){
.hero h1{font-size:56px}
.trust-bar{grid-template-columns:repeat(2,1fr)}
.why{grid-template-columns:1fr 1fr;grid-template-areas:"intro visual" "timeline timeline" "stats stats"}
.why-visual{min-height:430px}
.stat-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:800px){
body{font-size:17px}
.section{padding:65px 22px}
.section-heading h2,.projects h2,.why h2,.loan h2,.benefits h2,.plot-copy h2{font-size:35px}
.hero{min-height:680px;padding:55px 22px 35px}
.hero h1{font-size:45px}
.hero-content>p{font-size:17px}
.mobile-menu{display:block}
.header-main{gap:12px}
nav{gap:0}
.trust-bar{grid-template-columns:1fr;padding:25px 22px}
.trust-item{min-height:105px}
.amenity-grid-large{grid-template-columns:repeat(2,1fr)}
.amenity-grid-large span{height:125px}
.amenities h2{font-size:38px}
.why{grid-template-columns:1fr;grid-template-areas:"intro" "timeline" "visual" "stats"}
.why-visual{min-height:390px}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.floating-contact{display:none}
#mobileEnquiry{display:block}
}
@media(max-width:520px){
.section-heading h2,.projects h2,.why h2,.loan h2,.benefits h2,.plot-copy h2{font-size:30px}
.hero h1{font-size:36px}
.hero-content>p{font-size:16px}
.amenity-grid-large{grid-template-columns:repeat(2,1fr)}
.amenity-grid-large span{height:120px}
.trust-item b{font-size:16px}
.trust-item div span{font-size:12px}
.why-intro h2{font-size:37px}
.stat-grid{grid-template-columns:1fr 1fr}
.bank-logo{width:180px;height:95px}
}
/* === Latest requested refinements === */
.logo{width:100px;height:76px;border-radius:18px;background:transparent;box-shadow:none;transform:none;position:relative;overflow:visible;flex-direction:row;gap:10px}
.logo:hover{transform:translateY(-2px) scale(1.03)}
.logo-image{width:64px;height:64px;object-fit:contain;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.28));animation:logoFloat 3.2s ease-in-out infinite}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text strong{font-size:24px;letter-spacing:1px}
.logo-text small{font-size:7px;letter-spacing:2px;margin-top:4px}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1deg)}}
.trust-bar .trust-icon{color:#fff!important;background:linear-gradient(145deg,#ec2ca4,#9d096f)!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 5px rgba(0,0,0,.18);font-family:Arial,sans-serif}
.trust-item:nth-child(1) .trust-icon{font-size:0}
.trust-item:nth-child(1) .trust-icon:after{content:'✓';font-size:30px}
.trust-item:nth-child(2) .trust-icon{font-size:0}
.trust-item:nth-child(2) .trust-icon:after{content:'⌂';font-size:30px}
.trust-item:nth-child(3) .trust-icon{font-size:0}
.trust-item:nth-child(3) .trust-icon:after{content:'₹';font-size:30px}
.trust-item:nth-child(4) .trust-icon{font-size:0}
.trust-item:nth-child(4) .trust-icon:after{content:'↗';font-size:30px}
.testimonial-grid{grid-template-columns:repeat(4,1fr);gap:24px}
.testimonial-grid article{padding:0 0 25px;overflow:hidden;border-radius:18px;background:#fff}
.quote-mark{font-size:42px;padding:18px 22px 0;color:#df298f}
.testimonial-grid article>p{font-size:16px;line-height:1.8;padding:0 24px;margin:0 0 22px}
.person{padding:0 24px;gap:15px}
.person img{width:82px;height:82px;border-radius:50%;object-fit:cover;border:4px solid #f5d4e8;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.person b{font-size:15px}.person small{font-size:11px;margin-top:4px}
@media(max-width:800px){
.logo{width:auto}.logo-image{width:55px;height:55px}.logo-text strong{font-size:20px}
.testimonial-grid{grid-template-columns:1fr 1fr}
.app-download-section{margin:0 22px;padding:35px 25px;flex-direction:column;align-items:flex-start}
.app-download-section h2{font-size:30px}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
.testimonial-grid{grid-template-columns:1fr}
.person img{width:72px;height:72px}
.footer-grid{grid-template-columns:1fr}
}
/* =========================================================
AXIS DEVELOPERS — CURRENT ROUND OF UPDATES
========================================================= */
/* 1. Brighter, premium hero presentation — keeps the photographs visible */
.hero-slide{
filter:saturate(1.08) brightness(1.08) contrast(1.02);
}
.hero-overlay{
background:
linear-gradient(90deg,rgba(11,12,32,.58) 0%,rgba(14,15,36,.30) 42%,rgba(14,15,36,.05) 100%),
linear-gradient(0deg,rgba(0,0,0,.18),transparent 55%);
}
.hero-content{
padding:26px 30px;
border-radius:22px;
background:rgba(10,10,28,.24);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 20px 55px rgba(0,0,0,.12);
backdrop-filter:blur(4px);
}
.hero-content>p{color:#f7f6fa}
/* 2. Prime road locations from the supplied information artwork */
.locations{
background:linear-gradient(135deg,#fff 0%,#fbf5fa 100%);
}
.location-road-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
max-width:1250px;
margin:0 auto;
}
.location-road-grid a{
min-height:76px;
padding:18px 18px 18px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
border:1px solid #eee1eb;
border-radius:14px;
background:#fff;
color:#2b273b;
font-size:15px;
font-weight:700;
box-shadow:0 9px 24px rgba(32,20,43,.055);
transition:.3s ease;
}
.location-road-grid a span{
width:31px;height:31px;border-radius:50%;
display:grid;place-items:center;flex:none;
background:#fce5f4;color:#d51d8a;font-weight:900;
}
.location-road-grid a:hover{
transform:translateY(-5px);
border-color:#e98bc1;
box-shadow:0 16px 30px rgba(178,27,119,.12);
}
/* 3. Better mobile hero readability without making it dark */
@media(max-width:800px){
.hero-overlay{
background:linear-gradient(180deg,rgba(11,12,32,.30),rgba(11,12,32,.18) 55%,rgba(11,12,32,.42));
}
.hero-content{padding:22px 18px;background:rgba(10,10,28,.22)}
.location-road-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.location-road-grid{grid-template-columns:1fr}
.location-road-grid a{min-height:64px;font-size:14px}
}
/* 4. Starting welcome overlay — shown before the website */
body.site-loading{overflow:hidden}
.welcome-overlay{
position:fixed;
inset:0;
z-index:6000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 50% 42%,rgba(226,6,196,.20),transparent 32%),
linear-gradient(135deg,#0b0920 0%,#17102d 55%,#080716 100%);
opacity:1;
visibility:visible;
transition:opacity .9s ease,visibility .9s ease;
}
.welcome-overlay.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.welcome-card{
position:relative;
z-index:2;
width:min(650px,90vw);
text-align:center;
color:#fff;
animation:welcomeCardIn 1s cubic-bezier(.2,.8,.2,1) both;
}
.welcome-logo-wrap{
position:relative;
width:185px;height:185px;
margin:0 auto 22px;
display:grid;place-items:center;
}
.welcome-logo{
width:145px;height:145px;object-fit:contain;
position:relative;z-index:2;
filter:drop-shadow(0 18px 35px rgba(226,6,196,.35));
animation:welcomeLogoIn 1.5s cubic-bezier(.16,1,.3,1) both, welcomeLogoFloat 3s ease-in-out 1.5s infinite;
}
.welcome-ring{
position:absolute;
border:1px solid rgba(255,255,255,.18);
border-radius:50%;
inset:8px;
}
.ring-one{animation:ringPulse 2.8s ease-out infinite}
.ring-two{inset:25px;border-color:rgba(226,6,196,.45);animation:ringPulse 2.8s ease-out .7s infinite}
.welcome-kicker{
font-size:13px;
letter-spacing:4px;
color:#f0a4d4;
font-weight:800;
margin-bottom:7px;
}
.welcome-card h1{
font-size:54px;
line-height:1;
letter-spacing:-1px;
margin:0;
font-weight:800;
}
.welcome-card h1 span{color:#e83a9e}
.welcome-message{
margin-top:16px;
font-size:21px;
color:#fff;
font-weight:500;
}
.welcome-status{
margin-top:12px;
font-size:12px;
color:#aaa6ba;
}
.welcome-loader{
width:min(330px,70vw);
height:3px;
margin:26px auto 0;
border-radius:99px;
background:rgba(255,255,255,.13);
overflow:hidden;
}
.welcome-loader span{
display:block;
height:100%;
width:0;
border-radius:99px;
background:linear-gradient(90deg,#e206c4,#fff,#e206c4);
animation:welcomeLoad 3.7s cubic-bezier(.4,0,.2,1) forwards;
}
#skipWelcome{
margin-top:25px;
padding:11px 22px;
border:1px solid rgba(255,255,255,.24);
border-radius:30px;
color:#fff;
background:rgba(255,255,255,.07);
font:600 12px Poppins,Arial,sans-serif;
cursor:pointer;
opacity:0;
animation:skipIn .7s ease 1.5s forwards;
transition:.3s;
}
#skipWelcome b{margin-left:8px;color:#f06bbb}
#skipWelcome:hover{background:#e206c4;border-color:#e206c4;transform:translateY(-2px)}
.welcome-glow{
position:absolute;
width:360px;height:360px;
border-radius:50%;
filter:blur(70px);
opacity:.16;
}
.glow-one{background:#e206c4;left:-80px;top:20%;animation:glowMove 7s ease-in-out infinite}
.glow-two{background:#7542ff;right:-80px;bottom:5%;animation:glowMove 8s ease-in-out 1s infinite reverse}
@keyframes welcomeCardIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes welcomeLogoIn{from{opacity:0;transform:scale(1.45) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes welcomeLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ringPulse{0%{transform:scale(.72);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes welcomeLoad{0%{width:0}100%{width:100%}}
@keyframes skipIn{to{opacity:1}}
@keyframes glowMove{0%,100%{transform:translate(0,0)}50%{transform:translate(45px,-30px)}}
@media(max-width:520px){
.welcome-logo-wrap{width:155px;height:155px}
.welcome-logo{width:120px;height:120px}
.welcome-card h1{font-size:39px}
.welcome-message{font-size:17px;padding:0 10px}
.welcome-status{font-size:11px;padding:0 18px}
}
/* Keep the new trust-card symbols in sync with the supplied information. */
.trust-item:nth-child(1) .trust-icon:after{content:'✓';}
.trust-item:nth-child(2) .trust-icon:after{content:'◈';}
.trust-item:nth-child(3) .trust-icon:after{content:'⌂';}
.trust-item:nth-child(4) .trust-icon:after{content:'⌖';}
/* =========================================================
AXIS DEVELOPERS — REQUESTED ROUND 2
========================================================= */
/* 1. Slider quote: very light glass, no border, photograph remains visible */
.hero-quote-panel{
background:rgba(12,13,28,.13)!important;
border:0!important;
box-shadow:0 12px 38px rgba(0,0,0,.10)!important;
backdrop-filter:blur(2px)!important;
-webkit-backdrop-filter:blur(2px)!important;
max-width:720px;
}
.hero-quote-panel h1,.hero-quote-panel p{position:relative;z-index:1}
.hero-slide{filter:saturate(1.08) brightness(1.12) contrast(1.01)!important}
.hero-overlay{background:linear-gradient(90deg,rgba(10,12,30,.40) 0%,rgba(10,12,30,.16) 42%,rgba(10,12,30,.02) 100%),linear-gradient(0deg,rgba(0,0,0,.10),transparent 55%)!important}
/* 3 + 4. Direction section — compass conversation animation */
.directions{background:linear-gradient(135deg,#fff8fc 0%,#f3f7ff 100%)!important;overflow:hidden}
.direction-compass{position:relative;max-width:1150px;min-height:650px;margin:0 auto;border-radius:34px;background:radial-gradient(circle at center,#fff 0,#fff8fd 28%,#eef5ff 100%);box-shadow:0 25px 70px rgba(43,30,70,.10);overflow:hidden}
.compass-glow{position:absolute;left:50%;top:50%;width:330px;height:330px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(230,35,148,.18),rgba(230,35,148,0) 68%);animation:compassPulse 3s ease-in-out infinite}
.compass-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:145px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#e51a91,#a50a78);color:#fff;z-index:4;box-shadow:0 0 0 10px rgba(255,255,255,.8),0 20px 45px rgba(166,15,121,.30)}
.compass-center span{font-size:28px;font-weight:800;letter-spacing:2px}.compass-center small{text-align:center;font-size:8px;line-height:1.5;letter-spacing:1px;margin-top:7px}
.compass-line{position:absolute;background:linear-gradient(90deg,transparent,#d8b5ce,transparent);z-index:1}.compass-v{width:1px;height:76%;left:50%;top:12%}.compass-h{height:1px;width:76%;left:12%;top:50%}
.compass-arrow{position:absolute;z-index:5;display:flex;align-items:center;gap:7px;color:#332c42;font-weight:800;letter-spacing:1px;text-transform:uppercase}.compass-arrow b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #e7a7d2;color:#d91c91;box-shadow:0 8px 20px rgba(50,30,70,.12)}.compass-arrow span{font-size:11px}.arrow-n{left:50%;top:27px;transform:translateX(-50%);flex-direction:column}.arrow-e{right:27px;top:50%;transform:translateY(-50%)}.arrow-s{left:50%;bottom:27px;transform:translateX(-50%);flex-direction:column}.arrow-w{left:27px;top:50%;transform:translateY(-50%)}
.direction-card{position:absolute!important;width:245px;min-height:225px;margin:0!important;padding:24px 20px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(218,198,218,.65)!important;border-radius:18px!important;box-shadow:0 16px 40px rgba(39,28,57,.11)!important;z-index:3;opacity:0;transform:scale(.72)!important}
.direction-card h3{font-size:19px}.direction-card p{font-size:13px;line-height:1.65}.direction-card a{font-size:12px}
.direction-north{left:50%;top:85px;transform:translateX(-50%) scale(.72)!important}.direction-east{right:85px;top:50%;transform:translateY(-50%) scale(.72)!important}.direction-south{left:50%;bottom:85px;transform:translateX(-50%) scale(.72)!important}.direction-west{left:85px;top:50%;transform:translateY(-50%) scale(.72)!important}
.directions.visible .direction-north{animation:directionNorth 1.15s .10s cubic-bezier(.2,.9,.25,1) forwards}.directions.visible .direction-east{animation:directionEast 1.15s .25s cubic-bezier(.2,.9,.25,1) forwards}.directions.visible .direction-south{animation:directionSouth 1.15s .40s cubic-bezier(.2,.9,.25,1) forwards}.directions.visible .direction-west{animation:directionWest 1.15s .55s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes directionNorth{0%{opacity:0;transform:translateX(-50%) scale(.72)}35%{opacity:1;transform:translateX(-50%) translateY(72px) scale(1.04)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes directionEast{0%{opacity:0;transform:translateY(-50%) scale(.72)}35%{opacity:1;transform:translateY(-50%) translateX(-72px) scale(1.04)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes directionSouth{0%{opacity:0;transform:translateX(-50%) scale(.72)}35%{opacity:1;transform:translateX(-50%) translateY(-72px) scale(1.04)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes directionWest{0%{opacity:0;transform:translateY(-50%) scale(.72)}35%{opacity:1;transform:translateY(-50%) translateX(72px) scale(1.04)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes compassPulse{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.65}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
/* 5. Projects: only image + project name + road + city */
.projects{background:linear-gradient(135deg,#fff 0%,#fff7fb 100%)!important}
.project{border:0!important;border-radius:18px!important;background:#fff!important;box-shadow:0 12px 32px rgba(40,25,55,.09)!important}
.project-img{height:205px!important}.project-body{padding:18px 18px 20px!important}.project h3{font-size:20px!important;margin-bottom:8px}.project-road{font-size:14px!important;color:#d21a8c!important;margin:0!important;font-weight:600}.project-city{font-size:13px!important;color:#777!important;margin:4px 0 0!important}.project .tag,.project .project-meta,.project .details-btn{display:none!important}
/* 6. More Than A Plot is now immediately after projects */
.why{background:linear-gradient(120deg,#f7f0ff 0%,#fff 48%,#fff5fb 100%)!important;border-top:1px solid #f0e3ef;border-bottom:1px solid #f0e3ef}
/* 7. Alternating backgrounds so every section has visual separation */
.locations{background:linear-gradient(135deg,#fff8fc,#f4f7ff)!important}
.plot-info{background:linear-gradient(135deg,#fff,#f6fbf8)!important}
.loan{background:linear-gradient(135deg,#fff7fb,#f5f2ff)!important}
.benefits{background:linear-gradient(135deg,#f5fbff,#fff8fc)!important}
.testimonials{background:linear-gradient(135deg,#fff,#f8f1fb)!important}
/* Use supplied local photographs in lower sections */
.plot-image{background-image:url('img1.png')!important;background-position:center!important;background-size:cover!important}
.why-image{background-image:url('img2.png')!important;background-position:center!important;background-size:cover!important}
.amenity-video{background-image:url('img5.jpeg')!important}
/* Better direction layout on medium/mobile screens */
@media(max-width:900px){
.direction-compass{min-height:880px;border-radius:24px}
.direction-card{width:220px}
.direction-north{top:100px}.direction-south{bottom:100px}.direction-east{right:20px}.direction-west{left:20px}
}
@media(max-width:650px){
.hero-quote-panel{background:rgba(12,13,28,.10)!important;padding:18px 16px!important}
.direction-compass{min-height:1050px}
.compass-center{width:120px;height:120px}.compass-center span{font-size:23px}
.direction-card{width:calc(100% - 44px);left:22px!important;right:22px!important;min-height:185px}
.direction-north{top:45px;transform:scale(.72)!important}.direction-east{top:285px;transform:scale(.72)!important}.direction-south{bottom:45px;transform:scale(.72)!important}.direction-west{top:525px;transform:scale(.72)!important}
@keyframes directionNorth{0%{opacity:0;transform:scale(.72)}35%{opacity:1;transform:translateY(35px) scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes directionEast{0%{opacity:0;transform:scale(.72)}35%{opacity:1;transform:translateY(-35px) scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes directionSouth{0%{opacity:0;transform:scale(.72)}35%{opacity:1;transform:translateY(-35px) scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes directionWest{0%{opacity:0;transform:scale(.72)}35%{opacity:1;transform:translateY(35px) scale(1.02)}100%{opacity:1;transform:scale(1)}}
.compass-arrow{display:none}
.project-img{height:190px!important}
}
/* =========================================================
AXIS DEVELOPERS — V3 REQUESTED CHANGES
========================================================= */
/* Trust cards: icon + content centered */
.trust-item{
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
text-align:center!important;
gap:12px!important;
padding:24px 18px!important;
}
.trust-item .trust-icon{
margin:0 auto!important;
}
.trust-item > div{
width:100%;
display:flex!important;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.trust-item b,
.trust-item div span{
text-align:center!important;
}
/* Plot-plan background behind the direction conversation */
.direction-compass{
isolation:isolate;
}
.plot-layout-bg{
position:absolute;
inset:0;
z-index:0;
opacity:.18;
pointer-events:none;
overflow:hidden;
background:
linear-gradient(90deg, transparent 0 7%, rgba(119,145,130,.20) 7.15% 7.35%, transparent 7.5% 100%);
}
.plot-layout-bg:before{
content:"";
position:absolute;
left:6%;
right:6%;
top:13%;
bottom:13%;
border:2px solid rgba(126,143,132,.24);
border-radius:28px;
background:
repeating-linear-gradient(
90deg,
transparent 0,
transparent 10.8%,
rgba(106,130,117,.22) 10.8%,
rgba(106,130,117,.22) 11.1%
),
repeating-linear-gradient(
0deg,
transparent 0,
transparent 13%,
rgba(106,130,117,.20) 13%,
rgba(106,130,117,.20) 13.3%
);
transform:rotate(-2deg);
}
.plot-layout-bg:after{
content:"";
position:absolute;
width:58%;
height:34%;
left:21%;
top:33%;
border:3px solid rgba(116,137,123,.20);
border-radius:48% 52% 45% 55%;
background:
linear-gradient(90deg,transparent 49.6%,rgba(100,124,111,.20) 49.6% 50.4%,transparent 50.4%),
linear-gradient(0deg,transparent 49.6%,rgba(100,124,111,.20) 49.6% 50.4%,transparent 50.4%);
}
.plot-layout-bg i{
position:absolute;
width:7%;
height:10%;
border:1px solid rgba(93,119,103,.26);
background:rgba(255,255,255,.30);
transform:rotate(-2deg);
}
.plot-layout-bg i:nth-child(1){left:11%;top:20%}
.plot-layout-bg i:nth-child(2){left:20%;top:18%}
.plot-layout-bg i:nth-child(3){left:29%;top:17%}
.plot-layout-bg i:nth-child(4){left:63%;top:17%}
.plot-layout-bg i:nth-child(5){left:73%;top:19%}
.plot-layout-bg i:nth-child(6){left:82%;top:21%}
.plot-layout-bg i:nth-child(7){left:10%;top:65%}
.plot-layout-bg i:nth-child(8){left:20%;top:68%}
.plot-layout-bg i:nth-child(9){left:31%;top:70%}
.plot-layout-bg i:nth-child(10){left:60%;top:69%}
.plot-layout-bg i:nth-child(11){left:70%;top:67%}
.plot-layout-bg i:nth-child(12){left:81%;top:64%}
.plot-layout-bg i:nth-child(13){left:14%;top:39%}
.plot-layout-bg i:nth-child(14){left:78%;top:39%}
.plot-layout-bg i:nth-child(15){left:37%;top:20%}
.plot-layout-bg i:nth-child(16){left:54%;top:20%}
.plot-layout-bg i:nth-child(17){left:45%;top:73%}
.direction-compass > *:not(.plot-layout-bg){
position:relative;
}
/* New expert popup */
.axis-expert-popup{
z-index:5000!important;
}
.axis-expert-modal{
width:min(1080px,96vw)!important;
}
.axis-expert-card{
width:100%!important;
min-height:590px;
display:grid!important;
grid-template-columns:55% 45%;
position:relative!important;
top:auto!important;
right:auto!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
border-radius:30px!important;
background:
linear-gradient(110deg,#fff 0%,#fff9fc 58%,#ffe8f4 100%)!important;
box-shadow:0 35px 100px rgba(0,0,0,.42)!important;
animation:none!important;
}
.axis-expert-copy{
padding:46px 35px 32px 50px;
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
z-index:6;
}
.axis-greeting{
width:max-content;
max-width:100%;
display:flex;
flex-direction:column;
padding:13px 22px;
margin:3px 0 16px;
border-radius:18px 18px 18px 4px;
color:#fff;
background:linear-gradient(135deg,#e600a7,#b90a7e);
box-shadow:0 12px 30px rgba(208,0,145,.20);
}
.axis-greeting span{font-size:23px;font-weight:700}
.axis-greeting strong{font-size:31px;line-height:1.12}
.axis-expert-copy h3{
font-size:28px!important;
text-align:left!important;
margin:0 0 10px;
}
.axis-expert-copy h3 span{color:#d40091}
.axis-expert-description{
max-width:560px;
font-size:16px!important;
line-height:1.65!important;
color:#35384a!important;
margin:0 0 8px!important;
text-align:left!important;
}
.axis-expert-description.secondary{
color:#737687!important;
font-size:14px!important;
}
.axis-expert-benefits{
display:flex;
margin:12px 0 17px;
}
.axis-expert-benefits > div{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border-right:1px solid #e3dfe4;
text-align:left;
}
.axis-expert-benefits > div:first-child{justify-content:flex-start}
.axis-expert-benefits > div:last-child{border-right:0}
.axis-expert-benefits span{
width:40px;height:40px;
flex:0 0 40px;
display:grid;place-items:center;
border-radius:50%;
background:#ffe1f2;
color:#d40091;
font-size:19px;
font-weight:800;
}
.axis-expert-benefits b{
font-size:10px;
line-height:1.35;
color:#35384a;
}
.axis-phone-row{
width:100%;
max-width:520px;
height:60px;
display:flex;
align-items:center;
padding:0 18px;
border:2px solid #dedce4;
border-radius:34px;
background:#fff;
transition:.25s;
}
.axis-phone-row:focus-within{
border-color:#df008f;
box-shadow:0 0 0 4px rgba(223,0,143,.08);
}
.axis-phone-icon{
color:#df008f;
font-size:21px;
}
.axis-country-code{
margin-left:10px;
padding:0 13px;
border-left:1px solid #ddd;
font-weight:700;
color:#303344;
}
.axis-phone-row input{
width:100%;
min-width:0;
border:0!important;
outline:0!important;
background:transparent!important;
padding:0 5px!important;
margin:0!important;
font:15px Poppins,Arial,sans-serif!important;
color:#1f2638;
}
.axis-call-button{
max-width:520px;
height:58px;
margin-top:12px!important;
border-radius:32px!important;
font-size:17px!important;
}
.axis-call-button b{margin-left:8px;font-size:22px}
.axis-security{
margin-top:9px!important;
font-size:10px!important;
color:#7a7c88!important;
text-align:left!important;
}
/* Representative entering from right */
.axis-expert-person{
position:relative;
min-height:590px;
display:flex;
align-items:flex-end;
justify-content:center;
overflow:visible;
z-index:4;
}
.axis-person-light{
position:absolute;
width:470px;
height:470px;
right:4%;
bottom:20px;
border-radius:50%;
background:radial-gradient(circle,rgba(225,0,153,.17),rgba(225,0,153,0) 68%);
filter:blur(8px);
animation:axisPersonGlow 3.5s ease-in-out infinite;
}
.axis-person-image{
position:absolute!important;
width:min(520px,112%)!important;
max-height:625px!important;
height:auto!important;
right:-34px!important;
bottom:0!important;
object-fit:contain!important;
object-position:bottom center!important;
transform:translateX(180px)!important;
opacity:0!important;
filter:drop-shadow(0 25px 28px rgba(0,0,0,.17));
transition:
transform 1.15s cubic-bezier(.16,1,.3,1) .12s,
opacity .65s ease .12s!important;
z-index:5!important;
}
.axis-expert-popup.show .axis-person-image{
transform:translateX(0)!important;
opacity:1!important;
}
.axis-person-speech{
position:absolute;
right:18px;
top:62px;
z-index:9;
width:175px;
padding:14px 15px;
border-radius:20px 20px 4px 20px;
background:#fff;
box-shadow:0 15px 35px rgba(0,0,0,.13);
transform:rotate(-3deg);
}
.axis-person-speech span{display:block;font-size:12px;color:#404353}
.axis-person-speech strong{
display:block;
color:#d40091;
font-family:cursive;
font-size:20px;
line-height:1.1;
}
.axis-person-contact{
position:absolute;
right:8px;
bottom:20px;
z-index:10;
display:flex;
align-items:center;
gap:10px;
padding:10px 15px;
border-radius:32px;
background:rgba(255,255,255,.96);
box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.axis-person-contact > span{
width:39px;height:39px;
display:grid;place-items:center;
border-radius:50%;
background:#ffe0f2;
color:#d40091;
font-size:19px;
}
.axis-person-contact small{display:block;font-size:9px;color:#3c4050}
.axis-person-contact strong{display:block;font-size:12px;color:#171d2d}
@keyframes axisPersonGlow{
0%,100%{transform:scale(.94);opacity:.62}
50%{transform:scale(1.06);opacity:1}
}
/* Popup open/close animation */
.axis-expert-popup .axis-expert-modal{
transform:translateY(25px) scale(.97)!important;
opacity:0;
transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease!important;
}
.axis-expert-popup.show .axis-expert-modal{
transform:translateY(0) scale(1)!important;
opacity:1;
}
/* No timer: popup is triggered by a small scroll */
body.popup-open{overflow:hidden}
/* Mobile popup */
@media(max-width:800px){
.trust-item{
flex-direction:column!important;
text-align:center!important;
}
.axis-expert-modal{
width:min(520px,94vw)!important;
}
.axis-expert-card{
min-height:auto!important;
max-height:92vh;
overflow-y:auto!important;
display:flex!important;
flex-direction:column!important;
border-radius:24px!important;
}
.axis-expert-copy{
padding:38px 22px 18px;
}
.axis-greeting{
width:100%;
padding:12px 17px;
}
.axis-greeting span{font-size:20px}
.axis-greeting strong{font-size:26px}
.axis-expert-copy h3{font-size:23px!important}
.axis-expert-description{font-size:14px!important}
.axis-expert-description.secondary{font-size:12px!important}
.axis-expert-benefits{margin-bottom:14px}
.axis-expert-benefits span{width:34px;height:34px;flex-basis:34px;font-size:15px}
.axis-expert-benefits b{font-size:8px}
.axis-phone-row{height:54px}
.axis-call-button{height:54px;font-size:15px!important}
.axis-security{text-align:center!important}
.axis-expert-person{
min-height:275px;
margin-top:0;
}
.axis-person-image{
width:310px!important;
max-height:330px!important;
right:50%!important;
transform:translateX(calc(50% + 150px))!important;
}
.axis-expert-popup.show .axis-person-image{
transform:translateX(50%)!important;
}
.axis-person-light{
width:280px;height:280px;
right:50%;
transform:translateX(50%);
}
.axis-person-speech{
top:16px;
right:10px;
width:140px;
padding:10px 11px;
}
.axis-person-speech strong{font-size:16px}
.axis-person-contact{
right:50%;
transform:translateX(50%);
bottom:8px;
width:max-content;
max-width:92%;
padding:7px 11px;
}
.axis-person-contact > span{width:31px;height:31px;font-size:14px}
.axis-person-contact small{font-size:8px}
.axis-person-contact strong{font-size:9px}
}
@media(max-width:520px){
.axis-expert-copy{padding:34px 17px 15px}
.axis-expert-copy h3{font-size:21px!important}
.axis-expert-description{font-size:13px!important}
.axis-expert-benefits > div{gap:4px}
.axis-expert-benefits b{font-size:7px}
.axis-person-image{
width:280px!important;
max-height:300px!important;
}
.axis-expert-person{min-height:255px}
.axis-person-speech{width:125px}
}
/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
.axis-person-image,
.axis-person-light{
transition:none!important;
animation:none!important;
}
}
/* =========================================================
AXIS DEVELOPERS — DIRECTION COMPASS V4
Fixed N/S/E/W positioning + greener plotted layout
========================================================= */
/* Keep every compass element anchored to the compass box itself.
The older generic child rule was allowing N/S/E/W labels to
participate in normal document flow. */
.direction-compass{
position:relative!important;
isolation:isolate;
overflow:hidden!important;
min-height:700px!important;
background:
linear-gradient(135deg,rgba(241,248,238,.98),rgba(226,239,222,.98))!important;
border:1px solid rgba(82,118,78,.14);
}
/* A subtle plotted-land base */
.plot-layout-bg{
position:absolute!important;
inset:0!important;
z-index:0!important;
opacity:1!important;
overflow:hidden!important;
pointer-events:none!important;
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.38),transparent 34%),
linear-gradient(135deg,#e4efdf 0%,#d8e9d2 48%,#cfe3ca 100%)!important;
}
/* Main plotting roads / avenues */
.plot-layout-bg:before{
content:"";
position:absolute;
inset:-12%;
z-index:0;
opacity:.95;
background:
linear-gradient(72deg,transparent 0 39%,rgba(61,92,59,.34) 39.2% 40.8%,rgba(247,241,221,.88) 41% 44.8%,rgba(61,92,59,.34) 45% 46.4%,transparent 46.6%),
linear-gradient(0deg,transparent 0 46%,rgba(63,98,61,.34) 46.2% 47.3%,rgba(250,244,222,.90) 47.5% 51.5%,rgba(63,98,61,.34) 51.7% 52.8%,transparent 53%),
linear-gradient(122deg,transparent 0 62%,rgba(72,105,69,.23) 62.2% 63%,rgba(255,250,233,.74) 63.2% 65.2%,rgba(72,105,69,.23) 65.4% 66.2%,transparent 66.4%);
transform:rotate(-2deg) scale(1.08);
}
/* A curved internal road / green amenity zone */
.plot-layout-bg:after{
content:"";
position:absolute;
left:28%;
top:28%;
width:44%;
height:44%;
z-index:1;
border:18px solid rgba(246,241,220,.88);
border-radius:48% 52% 46% 54%;
box-shadow:
0 0 0 2px rgba(57,92,57,.20),
inset 0 0 0 2px rgba(57,92,57,.12);
background:
radial-gradient(circle at 50% 50%,rgba(52,105,59,.40) 0 25%,rgba(91,143,78,.18) 26% 42%,transparent 43%);
}
/* Plot parcels: alternate light and darker greens so it looks like
an actual plotted development rather than a plain grid. */
.plot-layout-bg i{
position:absolute!important;
width:8.2%!important;
height:11%!important;
border:1px solid rgba(52,91,52,.34)!important;
border-radius:3px!important;
transform:rotate(-2deg)!important;
z-index:2!important;
background:linear-gradient(145deg,rgba(121,171,103,.50),rgba(67,120,69,.30))!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 3px 8px rgba(35,75,38,.08)!important;
}
.plot-layout-bg i:nth-child(3n){
background:linear-gradient(145deg,rgba(55,112,61,.56),rgba(39,88,48,.38))!important;
}
.plot-layout-bg i:nth-child(4n){
background:linear-gradient(145deg,rgba(157,190,119,.55),rgba(92,143,77,.34))!important;
}
.plot-layout-bg i:nth-child(5n){
background:linear-gradient(145deg,rgba(43,101,55,.60),rgba(30,77,42,.42))!important;
}
/* Small plot-road divider marks */
.plot-layout-bg i:after{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:1px;
background:rgba(255,255,255,.24);
}
/* IMPORTANT: N/S/E/W are positioned relative to .direction-compass */
.direction-compass > .compass-arrow{
position:absolute!important;
z-index:20!important;
display:flex!important;
visibility:visible!important;
opacity:1!important;
margin:0!important;
pointer-events:none;
}
.direction-compass > .arrow-n{
left:50%!important;
top:18px!important;
right:auto!important;
bottom:auto!important;
transform:translateX(-50%)!important;
flex-direction:column!important;
}
.direction-compass > .arrow-e{
right:18px!important;
top:50%!important;
left:auto!important;
bottom:auto!important;
transform:translateY(-50%)!important;
flex-direction:row!important;
}
.direction-compass > .arrow-s{
left:50%!important;
bottom:18px!important;
right:auto!important;
top:auto!important;
transform:translateX(-50%)!important;
flex-direction:column!important;
}
.direction-compass > .arrow-w{
left:18px!important;
top:50%!important;
right:auto!important;
bottom:auto!important;
transform:translateY(-50%)!important;
flex-direction:row!important;
}
.direction-compass > .compass-arrow b{
width:46px!important;
height:46px!important;
background:rgba(255,255,255,.96)!important;
border:2px solid #6d9b68!important;
color:#2d7437!important;
box-shadow:0 8px 22px rgba(39,79,40,.20)!important;
font-size:18px!important;
}
.direction-compass > .compass-arrow span{
color:#244c2b!important;
font-size:11px!important;
font-weight:800!important;
text-shadow:0 1px 0 rgba(255,255,255,.7);
}
/* Keep the four plot cards attached to their intended compass sides. */
.direction-compass > .direction-card{
position:absolute!important;
z-index:10!important;
opacity:1;
}
.direction-compass > .direction-north{
left:50%!important;
top:92px!important;
right:auto!important;
bottom:auto!important;
transform:translateX(-50%)!important;
}
.direction-compass > .direction-east{
right:76px!important;
top:50%!important;
left:auto!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
.direction-compass > .direction-south{
left:50%!important;
bottom:92px!important;
right:auto!important;
top:auto!important;
transform:translateX(-50%)!important;
}
.direction-compass > .direction-west{
left:76px!important;
top:50%!important;
right:auto!important;
bottom:auto!important;
transform:translateY(-50%)!important;
}
/* Direction card icons look like plot markers */
.direction-card .dir-icon{
box-shadow:0 6px 16px rgba(48,91,51,.12);
}
.direction-card h3{color:#27352a!important}
.direction-card p{color:#647064!important}
.direction-card a{color:#31803b!important}
@media(max-width:900px){
.direction-compass{min-height:850px!important}
.direction-compass > .direction-card{width:220px!important;min-height:205px!important}
.direction-compass > .direction-north{top:88px!important}
.direction-compass > .direction-south{bottom:88px!important}
.direction-compass > .direction-east{right:35px!important}
.direction-compass > .direction-west{left:35px!important}
}
@media(max-width:650px){
.direction-compass{min-height:900px!important;border-radius:24px!important}
.direction-compass > .compass-arrow b{width:38px!important;height:38px!important;font-size:15px!important}
.direction-compass > .compass-arrow span{font-size:9px!important}
.direction-compass > .arrow-n{top:13px!important}
.direction-compass > .arrow-s{bottom:13px!important}
.direction-compass > .arrow-e{right:10px!important}
.direction-compass > .arrow-w{left:10px!important}
.direction-compass > .direction-card{
width:calc(100% - 120px)!important;
min-height:170px!important;
padding:17px 15px!important;
}
.direction-compass > .direction-north{
top:72px!important;
}
.direction-compass > .direction-east{
right:22px!important;
top:50%!important;
}
.direction-compass > .direction-south{
bottom:72px!important;
}
.direction-compass > .direction-west{
left:22px!important;
top:50%!important;
}
.direction-card h3{font-size:16px!important}
.direction-card p{font-size:11px!important;line-height:1.45!important}
.direction-card a{font-size:11px!important}
.direction-card .dir-icon{width:42px!important;height:42px!important;font-size:21px!important;margin-bottom:7px!important}
}
@media(max-width:480px){
.direction-compass{min-height:940px!important}
.direction-compass > .direction-card{width:calc(100% - 105px)!important;min-height:160px!important}
.direction-compass > .direction-north{top:65px!important}
.direction-compass > .direction-east{right:15px!important}
.direction-compass > .direction-south{bottom:65px!important}
.direction-compass > .direction-west{left:15px!important}
}
/* =========================================================
AXIS DEVELOPERS — DIRECTION COMPASS V5 POLISH
Visible Axis logo + premium glass/green plot cards
========================================================= */
.direction-compass .compass-center{
width:150px!important;
height:150px!important;
z-index:6!important;
background:rgba(255,255,255,.82)!important;
border:2px solid rgba(68,126,69,.28)!important;
box-shadow:0 0 0 8px rgba(255,255,255,.45),0 18px 50px rgba(43,92,48,.20)!important;
backdrop-filter:blur(5px)!important;
-webkit-backdrop-filter:blur(5px)!important;
}
.direction-compass .compass-axis-logo{
width:92px!important;
height:92px!important;
object-fit:contain!important;
display:block!important;
border-radius:50%!important;
filter:drop-shadow(0 6px 10px rgba(50,80,50,.16));
}
.direction-compass .compass-center small{
display:none!important;
}
/* Premium, non-plain-white direction cards */
.direction-compass > .direction-card{
width:245px!important;
min-height:220px!important;
padding:24px 21px 22px!important;
background:
linear-gradient(145deg,rgba(255,255,255,.91),rgba(238,248,235,.78))!important;
border:1px solid rgba(89,137,83,.28)!important;
border-top:3px solid rgba(67,125,69,.55)!important;
border-radius:24px!important;
box-shadow:
0 18px 45px rgba(42,79,43,.17),
inset 0 1px 0 rgba(255,255,255,.95)!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
overflow:hidden!important;
}
.direction-compass > .direction-card:before{
content:"";
position:absolute;
width:115px;
height:115px;
right:-48px;
top:-50px;
border-radius:50%;
background:rgba(90,153,83,.13);
pointer-events:none;
}
.direction-compass > .direction-card:after{
content:"";
position:absolute;
left:18px;
right:18px;
bottom:0;
height:4px;
border-radius:8px 8px 0 0;
background:linear-gradient(90deg,rgba(60,126,66,.12),rgba(60,126,66,.65),rgba(60,126,66,.12));
pointer-events:none;
}
.direction-compass > .direction-north{
top:70px!important;
bottom:auto!important;
}
.direction-compass > .direction-south{
bottom:70px!important;
top:auto!important;
}
.direction-compass > .direction-east{
right:70px!important;
}
.direction-compass > .direction-west{
left:70px!important;
}
.direction-compass .dir-icon{
width:56px!important;
height:56px!important;
margin:0 auto 12px!important;
border-radius:50%!important;
font-size:25px!important;
font-weight:800!important;
border:1px solid rgba(255,255,255,.72)!important;
box-shadow:0 9px 20px rgba(50,90,50,.13)!important;
}
.direction-compass .dir-icon.north,
.direction-compass .dir-icon.south{
background:linear-gradient(145deg,#dff7e9,#bfe8cd)!important;
color:#258047!important;
}
.direction-compass .dir-icon.east{
background:linear-gradient(145deg,#ffe9f7,#f8c8e5)!important;
color:#c32686!important;
}
.direction-compass .dir-icon.west{
background:linear-gradient(145deg,#fff1d7,#ffe0ad)!important;
color:#c47a00!important;
}
.direction-compass .direction-card h3{
position:relative!important;
z-index:2!important;
color:#273b2b!important;
font-size:19px!important;
margin-bottom:8px!important;
letter-spacing:-.2px;
}
.direction-compass .direction-card p{
position:relative!important;
z-index:2!important;
color:#617062!important;
font-size:12.5px!important;
line-height:1.55!important;
margin-bottom:15px!important;
}
.direction-compass .direction-card a{
position:relative!important;
z-index:2!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:8px 14px!important;
border-radius:30px!important;
background:rgba(57,125,64,.09)!important;
border:1px solid rgba(57,125,64,.16)!important;
color:#2e7a3b!important;
font-weight:800!important;
text-decoration:none!important;
transition:all .25s ease!important;
}
.direction-compass .direction-card a:hover{
background:#397d40!important;
color:#fff!important;
transform:translateY(-2px);
}
@media(max-width:900px){
.direction-compass > .direction-card{width:220px!important;min-height:205px!important}
.direction-compass > .direction-north{top:72px!important}
.direction-compass > .direction-south{bottom:72px!important}
.direction-compass > .direction-east{right:28px!important}
.direction-compass > .direction-west{left:28px!important}
}
@media(max-width:650px){
.direction-compass .compass-center{width:112px!important;height:112px!important}
.direction-compass .compass-axis-logo{width:70px!important;height:70px!important}
.direction-compass > .direction-card{width:calc(100% - 120px)!important;min-height:170px!important;padding:17px 15px 18px!important}
.direction-compass > .direction-north{top:60px!important}
.direction-compass > .direction-south{bottom:60px!important}
.direction-compass > .direction-east{right:18px!important}
.direction-compass > .direction-west{left:18px!important}
}
/* =========================================================
AXIS DEVELOPERS — SOLAPUR LOCATION NETWORK V6
Replaces the old location-card grid with a full-width
city-network / route-map visual.
========================================================= */
.locations{
width:100%!important;
padding:0!important;
background:#f4f8f2!important;
overflow:hidden!important;
}
.location-network{
width:100%;
min-height:720px;
display:grid;
grid-template-columns:minmax(330px,34%) 1fr;
background:linear-gradient(120deg,#f6fbf4 0%,#edf5ed 45%,#f8f4fa 100%);
}
.location-intro{
position:relative;
z-index:10;
padding:88px 8vw 70px 8vw;
display:flex;
flex-direction:column;
justify-content:center;
background:
radial-gradient(circle at 20% 15%,rgba(49,139,77,.16),transparent 32%),
linear-gradient(150deg,#183d2a 0%,#24583b 58%,#183629 100%);
color:#fff;
overflow:hidden;
}
.location-intro:before,.location-intro:after{
content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none;
}
.location-intro:before{width:440px;height:440px;right:-270px;top:-130px}
.location-intro:after{width:300px;height:300px;left:-210px;bottom:-160px}
.location-mini-label{font-size:10px;letter-spacing:1.7px;color:#b9e8c7;font-weight:800;margin-bottom:22px;position:relative;z-index:2}
.location-pin-large{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f24ba8,#c51680);box-shadow:0 15px 35px rgba(0,0,0,.22),0 0 0 9px rgba(242,75,168,.10);margin-bottom:25px;position:relative;z-index:2}
.location-pin-large span{font-size:30px;color:#fff;line-height:1}
.location-intro .section-tag{color:#8ee0a5;margin-bottom:8px;position:relative;z-index:2}
.location-intro h2{font-size:46px;line-height:1.12;margin:0;letter-spacing:-1.3px;position:relative;z-index:2}
.location-intro h2 span{color:#f45bad}
.location-intro h3{font-size:19px;line-height:1.6;color:#fff;margin:18px 0 8px;font-weight:600;position:relative;z-index:2}
.location-intro-text{font-size:13px;line-height:1.85;color:#cde0d2;max-width:480px;position:relative;z-index:2}
.location-stats{display:flex;align-items:center;gap:20px;margin:27px 0;position:relative;z-index:2;color:#b9d2c0;font-size:11px}
.location-stats b{display:block;color:#fff;font-size:24px;line-height:1}
.location-stats i{width:1px;height:35px;background:#ffffff35}
.location-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:25px;padding:14px 21px;border-radius:50px;background:#fff;color:#245b39;font-size:12px;font-weight:800;box-shadow:0 10px 25px rgba(0,0,0,.16);transition:.3s;position:relative;z-index:2}
.location-cta b{font-size:18px;color:#df2a91;transition:.3s}
.location-cta:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,.22)}
.location-cta:hover b{transform:translateX(4px)}
.solapur-map-art{
position:relative;
min-height:720px;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(circle at 51% 50%,rgba(255,255,255,.98) 0 7%,rgba(220,239,219,.75) 8%,transparent 28%),
linear-gradient(135deg,#e6f1e2,#dbead7 48%,#eef3e7);
}
.map-grid-lines{position:absolute;inset:0;opacity:.45;background-image:linear-gradient(rgba(50,104,58,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(50,104,58,.07) 1px,transparent 1px);background-size:58px 58px;transform:rotate(-4deg) scale(1.08)}
.map-grid-lines:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 38%,rgba(255,255,255,.25) 72%,rgba(25,71,37,.08) 100%)}
.map-road{position:absolute;background:rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(63,112,69,.07);z-index:1}
.road-one{width:140%;height:24px;left:-15%;top:48%;transform:rotate(-17deg);border-top:5px solid #c8d9c5;border-bottom:4px solid #d9e5d5}
.road-two{width:130%;height:20px;left:-10%;top:51%;transform:rotate(27deg);border-top:4px solid #c8d9c5;border-bottom:4px solid #d9e5d5}
.road-three{width:22px;height:125%;left:51%;top:-10%;transform:rotate(13deg);border-left:4px solid #c8d9c5;border-right:4px solid #d9e5d5}
.map-ring{position:absolute;left:50%;top:50%;border:1px dashed rgba(52,111,61,.28);border-radius:50%;transform:translate(-50%,-50%);z-index:2}
.ring-a{width:230px;height:230px}.ring-b{width:410px;height:410px;border-style:solid;border-color:rgba(52,111,61,.13)}.ring-c{width:610px;height:610px;border-color:rgba(223,42,145,.10)}
.solapur-hub{position:absolute;left:50%;top:50%;width:175px;height:175px;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#fff,#eef7ec);border:3px solid rgba(51,119,62,.30);box-shadow:0 20px 55px rgba(44,88,48,.18),0 0 0 13px rgba(255,255,255,.52);z-index:8;text-align:center}
.hub-pulse{position:absolute;inset:-18px;border:2px solid rgba(225,37,143,.18);border-radius:50%;animation:locationPulse 2.8s ease-out infinite}
.hub-logo{width:57px;height:57px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#df218d,#a70b76);color:#fff;font-size:16px;font-weight:800;letter-spacing:1px;box-shadow:0 8px 18px rgba(170,20,115,.25);margin-bottom:8px}
.solapur-hub strong{font-size:18px;letter-spacing:2px;color:#245638}.solapur-hub small{font-size:6px;letter-spacing:1.2px;color:#778979;margin-top:3px}
.map-location{position:absolute;z-index:9;display:flex;align-items:center;gap:8px;color:#24462e;background:rgba(255,255,255,.76);border:1px solid rgba(73,119,78,.18);border-radius:30px;padding:8px 12px 8px 8px;box-shadow:0 7px 20px rgba(46,85,48,.10);backdrop-filter:blur(7px);transition:.3s;white-space:nowrap}
.map-location:hover{transform:translateY(-4px) scale(1.03);background:#fff;border-color:#e43b9b;box-shadow:0 14px 28px rgba(40,80,44,.16);z-index:20}
.map-pin{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#e5f5e8;color:#268047;font-size:17px;font-weight:900;flex:none}
.map-location b{font-size:11px;font-weight:800}.map-location small{font-size:7px;text-transform:uppercase;letter-spacing:.8px;color:#9a9b9b;margin-left:2px}
.map-location:nth-of-type(1n) .map-pin{background:#e5f5e8;color:#268047}
.map-location:nth-of-type(3n) .map-pin{background:#fde7f4;color:#d5248c}
.map-location:nth-of-type(4n) .map-pin{background:#fff0d4;color:#b77600}
.map-location:nth-of-type(5n) .map-pin{background:#e5f0fa;color:#3477a6}
.loc-1{left:9%;top:17%}.loc-2{left:30%;top:8%}.loc-3{left:57%;top:7%}.loc-4{right:5%;top:19%}.loc-5{left:4%;top:38%}.loc-6{left:27%;top:29%}.loc-7{right:7%;top:38%}.loc-8{right:2%;top:55%}.loc-9{left:6%;bottom:20%}.loc-10{left:29%;bottom:8%}.loc-11{left:53%;bottom:9%}.loc-12{right:5%;bottom:21%}.loc-13{left:13%;top:62%}.loc-14{right:19%;top:67%}
.map-compass{position:absolute;right:28px;bottom:22px;width:42px;height:42px;border-radius:50%;display:grid;grid-template-columns:1fr 1fr;place-items:center;background:rgba(255,255,255,.70);border:1px solid rgba(42,89,47,.18);z-index:10;font-size:7px;color:#47704d}
.map-compass span{color:#c3c9c4}.map-caption{position:absolute;right:28px;top:24px;font-size:8px;letter-spacing:1.7px;color:#5d775f;font-weight:800;z-index:10}
@keyframes locationPulse{0%{transform:scale(.82);opacity:.7}70%{transform:scale(1.12);opacity:0}100%{transform:scale(1.12);opacity:0}}
@media(max-width:1000px){
.location-network{grid-template-columns:1fr;min-height:0}
.location-intro{padding:70px 7%;min-height:500px}
.solapur-map-art{min-height:680px}
.location-intro h2{font-size:42px}
}
@media(max-width:700px){
.location-intro{padding:58px 22px;min-height:480px}
.location-intro h2{font-size:34px}.location-intro h3{font-size:16px}.location-intro-text{font-size:12px}
.solapur-map-art{min-height:820px}
.map-location{padding:6px 9px 6px 6px;gap:6px}.map-location b{font-size:9px}.map-location small{display:none}.map-pin{width:25px;height:25px;font-size:14px}
.loc-1{left:4%;top:10%}.loc-2{left:33%;top:5%}.loc-3{right:4%;left:auto;top:14%}.loc-4{right:2%;top:31%}.loc-5{left:2%;top:27%}.loc-6{left:22%;top:19%}.loc-7{right:2%;top:48%}.loc-8{right:3%;top:64%}.loc-9{left:3%;bottom:22%}.loc-10{left:25%;bottom:7%}.loc-11{right:4%;left:auto;bottom:8%}.loc-12{right:2%;bottom:27%}.loc-13{left:4%;top:53%}.loc-14{right:21%;top:57%}
.solapur-hub{width:140px;height:140px}.hub-logo{width:48px;height:48px;font-size:14px}.solapur-hub strong{font-size:15px}.ring-a{width:190px;height:190px}.ring-b{width:330px;height:330px}.ring-c{width:500px;height:500px}
.map-caption{right:15px;top:15px;font-size:6px}.map-compass{right:15px;bottom:15px}
}
@media(max-width:480px){
.solapur-map-art{min-height:930px}.location-stats{margin:20px 0}.location-mini-label{font-size:8px}.location-pin-large{width:54px;height:54px}.location-intro h2{font-size:31px}
.map-location b{font-size:8px}.map-location{padding-right:7px}
.loc-1{left:3%;top:9%}.loc-2{left:30%;top:4%}.loc-3{right:2%;top:12%}.loc-4{right:1%;top:28%}.loc-5{left:2%;top:24%}.loc-6{left:18%;top:18%}.loc-7{right:1%;top:45%}.loc-8{right:2%;top:61%}.loc-9{left:2%;bottom:24%}.loc-10{left:17%;bottom:8%}.loc-11{right:2%;bottom:7%}.loc-12{right:1%;bottom:25%}.loc-13{left:2%;top:51%}.loc-14{right:17%;top:55%}
}
/* =========================================================
AXIS DEVELOPERS V8 — PREFERRED LOCATION POLISH
Larger, colorful Solapur road names while retaining the
full-width Solapur location-network design.
========================================================= */
.location-network{min-height:760px!important}
.solapur-map-art{min-height:760px!important}
.map-location b{
font-size:15px!important;
line-height:1.25!important;
letter-spacing:-.15px!important;
}
.map-location{
border-width:1px!important;
padding:9px 14px 9px 9px!important;
gap:9px!important;
}
.map-pin{width:34px!important;height:34px!important;font-size:19px!important}
.map-location:nth-of-type(1n) .map-pin{background:linear-gradient(145deg,#d9f8e3,#8edca8)!important;color:#176d3b!important}
.map-location:nth-of-type(2n) .map-pin{background:linear-gradient(145deg,#ffe0f1,#f38fc6)!important;color:#b31773!important}
.map-location:nth-of-type(3n) .map-pin{background:linear-gradient(145deg,#fff0c9,#f2c15a)!important;color:#9a6500!important}
.map-location:nth-of-type(4n) .map-pin{background:linear-gradient(145deg,#dceeff,#8fc7ee)!important;color:#1e6597!important}
.map-location:nth-of-type(5n) .map-pin{background:linear-gradient(145deg,#eadfff,#b9a1ed)!important;color:#6541a5!important}
.map-location:nth-of-type(6n) .map-pin{background:linear-gradient(145deg,#ffe4d8,#f3a07e)!important;color:#a64c29!important}
.map-location:nth-of-type(1) b,.map-location:nth-of-type(7) b,.map-location:nth-of-type(13) b{color:#17703d!important}
.map-location:nth-of-type(2) b,.map-location:nth-of-type(8) b,.map-location:nth-of-type(14) b{color:#b21d77!important}
.map-location:nth-of-type(3) b,.map-location:nth-of-type(9) b{color:#a36a00!important}
.map-location:nth-of-type(4) b,.map-location:nth-of-type(10) b{color:#246c9e!important}
.map-location:nth-of-type(5) b,.map-location:nth-of-type(11) b{color:#6949a8!important}
.map-location:nth-of-type(6) b,.map-location:nth-of-type(12) b{color:#a4512e!important}
@media(max-width:1000px){
.location-network{min-height:0!important}
.solapur-map-art{min-height:720px!important}
}
@media(max-width:700px){
.solapur-map-art{min-height:850px!important}
.map-location{padding:7px 10px 7px 7px!important;gap:7px!important}
.map-location b{font-size:12px!important}
.map-pin{width:29px!important;height:29px!important;font-size:16px!important}
}
@media(max-width:480px){
.solapur-map-art{min-height:950px!important}
.map-location b{font-size:11px!important}
.map-pin{width:27px!important;height:27px!important;font-size:15px!important}
}
/* =========================================================
AXIS DEVELOPERS — DIRECTION COMPASS V6 / REFERENCE DESIGN
Recreates the earlier wide plotted-development compass look:
central Axis logo, four floating direction cards, colored
directional markers and a greener plotted-land background.
========================================================= */
.directions{
padding-left:0!important;
padding-right:0!important;
background:#edf5e9!important;
overflow:hidden!important;
}
.directions .section-heading{
padding-left:7%;
padding-right:7%;
}
.direction-compass{
width:100%!important;
max-width:none!important;
min-height:700px!important;
height:700px!important;
margin:0!important;
border-radius:0!important;
overflow:hidden!important;
position:relative!important;
isolation:isolate!important;
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.68) 0 15%,transparent 36%),
linear-gradient(135deg,#e4efdf 0%,#d8e9d2 48%,#d1e4cb 100%)!important;
box-shadow:none!important;
border:0!important;
}
/* Plotted land / roads */
.direction-compass .plot-layout-bg{
position:absolute!important;
inset:0!important;
opacity:1!important;
z-index:0!important;
background:
linear-gradient(25deg,transparent 0 35%,rgba(255,255,255,.58) 35.2% 39%,transparent 39.2% 100%),
linear-gradient(155deg,transparent 0 47%,rgba(255,255,255,.60) 47.2% 51%,transparent 51.2% 100%),
linear-gradient(70deg,transparent 0 63%,rgba(255,255,255,.45) 63.2% 66%,transparent 66.2% 100%),
radial-gradient(circle at 50% 50%,rgba(255,255,255,.52),transparent 34%),
#dbead5!important;
}
.direction-compass .plot-layout-bg:before{
content:"";
position:absolute;
inset:-15%;
background:
linear-gradient(0deg,transparent 0 48%,rgba(64,105,66,.17) 48.2% 49.2%,rgba(249,245,226,.86) 49.4% 52.4%,rgba(64,105,66,.17) 52.6% 53.6%,transparent 53.8%),
linear-gradient(73deg,transparent 0 42%,rgba(65,105,65,.16) 42.2% 43.2%,rgba(249,245,226,.82) 43.4% 46.2%,rgba(65,105,65,.16) 46.4% 47.4%,transparent 47.6%),
linear-gradient(120deg,transparent 0 65%,rgba(65,105,65,.14) 65.2% 66.1%,rgba(250,246,228,.76) 66.3% 68.8%,rgba(65,105,65,.14) 69% 69.9%,transparent 70.1%);
transform:rotate(-2deg) scale(1.08);
}
.direction-compass .plot-layout-bg:after{
content:"";
position:absolute;
left:34%;top:25%;width:32%;height:50%;
border:18px solid rgba(250,246,228,.70);
border-radius:50%;
box-shadow:0 0 0 2px rgba(57,96,57,.12),inset 0 0 0 2px rgba(57,96,57,.10);
background:radial-gradient(circle,rgba(69,128,70,.30) 0 25%,rgba(104,157,91,.15) 26% 48%,transparent 49%);
}
.direction-compass .plot-layout-bg i{
width:5.6%!important;
height:10%!important;
border:1px solid rgba(52,91,52,.26)!important;
border-radius:4px!important;
z-index:3!important;
background:linear-gradient(145deg,rgba(129,180,110,.48),rgba(74,128,72,.28))!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 10px rgba(38,77,39,.07)!important;
}
.direction-compass .plot-layout-bg i:nth-child(3n){background:linear-gradient(145deg,rgba(56,115,61,.48),rgba(42,91,48,.29))!important}
.direction-compass .plot-layout-bg i:nth-child(4n){background:linear-gradient(145deg,rgba(177,199,129,.52),rgba(111,157,83,.30))!important}
.direction-compass .plot-layout-bg i:nth-child(5n){background:linear-gradient(145deg,rgba(74,126,69,.52),rgba(41,91,47,.32))!important}
/* central Axis logo */
.direction-compass .compass-glow{
position:absolute!important;
left:50%!important;top:50%!important;
width:390px!important;height:390px!important;
transform:translate(-50%,-50%)!important;
border-radius:50%!important;
background:radial-gradient(circle,rgba(52,112,61,.17),rgba(52,112,61,0) 67%)!important;
animation:compassPulseReference 3s ease-in-out infinite!important;
z-index:2!important;
}
.direction-compass .compass-center{
left:50%!important;top:50%!important;
width:205px!important;height:205px!important;
transform:translate(-50%,-50%)!important;
z-index:12!important;
border-radius:50%!important;
background:rgba(255,255,255,.90)!important;
border:3px solid rgba(57,107,61,.30)!important;
box-shadow:0 0 0 10px rgba(255,255,255,.48),0 18px 45px rgba(45,88,48,.22)!important;
backdrop-filter:blur(5px)!important;
}
.direction-compass .compass-axis-logo{
width:142px!important;height:142px!important;
object-fit:contain!important;
display:block!important;
border-radius:50%!important;
filter:drop-shadow(0 7px 13px rgba(50,80,50,.18));
}
.direction-compass .compass-center small{display:none!important}
.direction-compass .compass-line{z-index:5!important;opacity:.48!important}
.direction-compass .compass-v{height:92%!important;top:4%!important;background:linear-gradient(180deg,transparent,#6f9d6e,transparent)!important}
.direction-compass .compass-h{width:92%!important;left:4%!important;background:linear-gradient(90deg,transparent,#6f9d6e,transparent)!important}
/* Floating direction markers */
.direction-compass > .compass-arrow{
position:absolute!important;
z-index:22!important;
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:none!important;
gap:6px!important;
}
.direction-compass > .compass-arrow b{
width:58px!important;height:58px!important;
display:grid!important;place-items:center!important;
border-radius:50%!important;
background:#fff!important;
font-size:21px!important;
font-weight:800!important;
box-shadow:0 8px 20px rgba(39,76,41,.18)!important;
}
.direction-compass > .compass-arrow span{
display:grid!important;
place-items:center!important;
width:76px!important;height:76px!important;
border-radius:50%!important;
color:#fff!important;
font-size:9px!important;
font-weight:900!important;
letter-spacing:1px!important;
text-transform:uppercase!important;
line-height:1!important;
box-shadow:0 9px 20px rgba(39,76,41,.20),inset 0 0 0 2px rgba(255,255,255,.75)!important;
}
.direction-compass > .arrow-n{
left:50%!important;top:-18px!important;right:auto!important;bottom:auto!important;
transform:translateX(-50%)!important;
flex-direction:column!important;
}
.direction-compass > .arrow-n b{border:3px solid #2d7437!important;color:#2d7437!important}
.direction-compass > .arrow-n span{background:linear-gradient(145deg,#43a85b,#178441)!important}
.direction-compass > .arrow-n span:before{content:'↑';font-size:38px;margin-bottom:3px}
.direction-compass > .arrow-n span{font-size:0!important}
.direction-compass > .arrow-n span:after{content:'NORTH';font-size:9px!important;display:block}
.direction-compass > .arrow-e{
right:-18px!important;top:50%!important;left:auto!important;bottom:auto!important;
transform:translateY(-50%)!important;
flex-direction:row!important;
}
.direction-compass > .arrow-e b{border:3px solid #d31b88!important;color:#d31b88!important;order:2}
.direction-compass > .arrow-e span{background:linear-gradient(145deg,#ee43a8,#c20e79)!important;order:1}
.direction-compass > .arrow-e span:before{content:'→';font-size:38px}
.direction-compass > .arrow-e span{font-size:0!important}
.direction-compass > .arrow-e span:after{content:'EAST';font-size:9px!important;display:block}
.direction-compass > .arrow-s{
left:50%!important;bottom:-18px!important;right:auto!important;top:auto!important;
transform:translateX(-50%)!important;
flex-direction:column!important;
}
.direction-compass > .arrow-s b{border:3px solid #2c83bc!important;color:#2c83bc!important;order:2}
.direction-compass > .arrow-s span{background:linear-gradient(145deg,#4ba3d3,#2476ad)!important;order:1}
.direction-compass > .arrow-s span:before{content:'↓';font-size:38px}
.direction-compass > .arrow-s span{font-size:0!important}
.direction-compass > .arrow-s span:after{content:'SOUTH';font-size:9px!important;display:block}
.direction-compass > .arrow-w{
left:-18px!important;top:50%!important;right:auto!important;bottom:auto!important;
transform:translateY(-50%)!important;
flex-direction:row!important;
}
.direction-compass > .arrow-w b{border:3px solid #e58b17!important;color:#df850d!important;order:1}
.direction-compass > .arrow-w span{background:linear-gradient(145deg,#f3a126,#e1840a)!important;order:2}
.direction-compass > .arrow-w span:before{content:'←';font-size:38px}
.direction-compass > .arrow-w span{font-size:0!important}
.direction-compass > .arrow-w span:after{content:'WEST';font-size:9px!important;display:block}
/* Direction cards — floating like the reference, not boxed */
.direction-compass > .direction-card{
position:absolute!important;
z-index:16!important;
width:300px!important;
min-height:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
overflow:visible!important;
text-align:center!important;
}
.direction-compass > .direction-card:before,
.direction-compass > .direction-card:after{display:none!important}
.direction-compass > .direction-north{left:50%!important;top:100px!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important}
.direction-compass > .direction-east{right:9%!important;top:50%!important;left:auto!important;bottom:auto!important;transform:translateY(-50%)!important}
.direction-compass > .direction-south{left:50%!important;bottom:92px!important;right:auto!important;top:auto!important;transform:translateX(-50%)!important}
.direction-compass > .direction-west{left:9%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translateY(-50%)!important}
.direction-compass .direction-card .dir-icon{
display:none!important;
}
.direction-compass .direction-card h3{
font-size:32px!important;
line-height:1.1!important;
margin:0 0 8px!important;
color:#203b27!important;
font-weight:800!important;
letter-spacing:-1px!important;
text-shadow:0 2px 0 rgba(255,255,255,.58)!important;
}
.direction-compass .direction-card p{
font-size:15px!important;
line-height:1.55!important;
margin:0 auto 22px!important;
max-width:290px!important;
min-height:0!important;
color:#5b6e5d!important;
}
.direction-compass .direction-card a{
display:inline-flex!important;
background:transparent!important;
border:0!important;
padding:0!important;
color:#168044!important;
font-size:14px!important;
font-weight:900!important;
letter-spacing:.3px!important;
box-shadow:none!important;
}
.direction-compass .direction-card a:hover{background:transparent!important;color:#d21a89!important;transform:none!important}
/* subtle directional emphasis */
.direction-compass > .direction-north h3{color:#1f3d27!important}
.direction-compass > .direction-east h3{color:#243c2b!important}
.direction-compass > .direction-south h3{color:#243c2b!important}
.direction-compass > .direction-west h3{color:#243c2b!important}
@keyframes compassPulseReference{
0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.75}
50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}
}
@media(max-width:1100px){
.direction-compass{height:720px!important;min-height:720px!important}
.direction-compass > .direction-card{width:260px!important}
.direction-compass > .direction-east{right:5%!important}
.direction-compass > .direction-west{left:5%!important}
.direction-compass .direction-card h3{font-size:27px!important}
.direction-compass .direction-card p{font-size:13px!important;max-width:250px!important}
}
@media(max-width:800px){
.directions .section-heading{padding-left:22px;padding-right:22px}
.direction-compass{height:900px!important;min-height:900px!important}
.direction-compass .compass-center{width:155px!important;height:155px!important}
.direction-compass .compass-axis-logo{width:108px!important;height:108px!important}
.direction-compass .compass-glow{width:300px!important;height:300px!important}
.direction-compass > .direction-card{width:230px!important}
.direction-compass > .direction-north{top:105px!important}
.direction-compass > .direction-south{bottom:105px!important}
.direction-compass > .direction-east{right:18px!important}
.direction-compass > .direction-west{left:18px!important}
.direction-compass .direction-card h3{font-size:23px!important}
.direction-compass .direction-card p{font-size:12px!important;max-width:220px!important}
.direction-compass > .compass-arrow b{width:48px!important;height:48px!important;font-size:17px!important}
.direction-compass > .compass-arrow span{width:62px!important;height:62px!important}
}
@media(max-width:520px){
.direction-compass{height:980px!important;min-height:980px!important}
.direction-compass .compass-center{width:125px!important;height:125px!important}
.direction-compass .compass-axis-logo{width:88px!important;height:88px!important}
.direction-compass .compass-glow{width:250px!important;height:250px!important}
.direction-compass > .direction-card{width:calc(100% - 90px)!important}
.direction-compass > .direction-north{top:80px!important}
.direction-compass > .direction-east{right:8px!important}
.direction-compass > .direction-south{bottom:80px!important}
.direction-compass > .direction-west{left:8px!important}
.direction-compass .direction-card h3{font-size:19px!important}
.direction-compass .direction-card p{font-size:11px!important;line-height:1.45!important;max-width:190px!important;margin-bottom:13px!important}
.direction-compass .direction-card a{font-size:10px!important}
.direction-compass > .compass-arrow b{width:40px!important;height:40px!important;font-size:14px!important}
.direction-compass > .compass-arrow span{width:52px!important;height:52px!important}
.direction-compass > .arrow-n{top:-10px!important}
.direction-compass > .arrow-s{bottom:-10px!important}
.direction-compass > .arrow-e{right:-10px!important}
.direction-compass > .arrow-w{left:-10px!important}
}
/* =========================================================
AXIS DEVELOPERS — V6 DIRECTION LANDSCAPE
Full-width directional land concept — no card layout
========================================================= */
.directions{
width:100%;
padding-left:0!important;
padding-right:0!important;
padding-top:95px!important;
padding-bottom:0!important;
background:
radial-gradient(circle at 12% 55%,rgba(247,190,74,.16),transparent 24%),
radial-gradient(circle at 88% 45%,rgba(225,47,155,.13),transparent 25%),
linear-gradient(135deg,#fbfdf8 0%,#eef7ef 48%,#faf4fb 100%)!important;
overflow:hidden!important;
}
.directions .section-heading{
max-width:1050px;
margin:0 auto 48px!important;
padding:0 7%;
position:relative;
z-index:30;
}
.directions .section-heading h2{font-size:46px!important}
.directions .section-heading h2 span{color:#31904d!important}
/* Full-width illustrated land field */
.direction-compass{
position:relative!important;
width:100%!important;
max-width:none!important;
min-height:690px!important;
margin:0!important;
border-radius:0!important;
overflow:hidden!important;
isolation:isolate!important;
background:
linear-gradient(118deg,rgba(50,126,67,.10) 0 10%,transparent 10% 100%),
linear-gradient(62deg,transparent 0 76%,rgba(220,44,139,.08) 76% 86%,transparent 86%),
linear-gradient(135deg,#dcefd7 0%,#eef5d9 38%,#f9eed5 63%,#e9dff2 100%)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 35px 80px rgba(34,78,38,.08)!important;
}
/* Large land parcels / roads */
.direction-compass .plot-layout-bg{
position:absolute!important;
inset:0!important;
z-index:0!important;
opacity:1!important;
overflow:hidden!important;
background:
linear-gradient(26deg,transparent 0 45%,rgba(255,255,255,.68) 45.2% 48%,transparent 48.2%),
linear-gradient(154deg,transparent 0 51%,rgba(255,255,255,.60) 51.2% 54.5%,transparent 54.7%),
linear-gradient(90deg,transparent 0 49.2%,rgba(88,143,77,.17) 49.3% 50.4%,transparent 50.5%),
linear-gradient(0deg,transparent 0 49.2%,rgba(88,143,77,.17) 49.3% 50.4%,transparent 50.5%),
radial-gradient(ellipse at center,rgba(255,255,255,.56) 0 18%,transparent 18.5%),
#dcebd7!important;
}
.direction-compass .plot-layout-bg:before{
content:"";position:absolute;inset:-18%;
background:
repeating-linear-gradient(18deg,transparent 0 72px,rgba(64,121,65,.14) 73px 76px,transparent 77px 145px),
repeating-linear-gradient(112deg,transparent 0 92px,rgba(255,255,255,.32) 94px 98px,transparent 99px 180px);
transform:rotate(-4deg);
}
.direction-compass .plot-layout-bg:after{
content:"";position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);border:2px dashed rgba(58,119,65,.24);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.13),0 0 0 145px rgba(255,255,255,.08);
}
.direction-compass .plot-layout-bg i{
position:absolute!important;
display:block!important;
width:92px!important;height:62px!important;
border:1px solid rgba(54,108,57,.25)!important;
border-radius:5px!important;
background:linear-gradient(145deg,rgba(104,164,93,.52),rgba(190,219,166,.58))!important;
box-shadow:inset 0 1px rgba(255,255,255,.45),0 5px 13px rgba(39,91,42,.08)!important;
transform:rotate(-2deg)!important;
}
.direction-compass .plot-layout-bg i:nth-child(3n){background:linear-gradient(145deg,rgba(64,132,73,.48),rgba(151,198,130,.55))!important}
.direction-compass .plot-layout-bg i:nth-child(4n){background:linear-gradient(145deg,rgba(223,183,94,.35),rgba(247,225,166,.52))!important}
.direction-compass .plot-layout-bg i:nth-child(5n){background:linear-gradient(145deg,rgba(188,98,153,.28),rgba(229,184,213,.44))!important}
/* Hide the old plot-card positioning model */
.direction-compass > .direction-card{
position:absolute!important;
width:auto!important;
min-height:0!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
overflow:visible!important;
opacity:1!important;
z-index:12!important;
text-align:center!important;
transform:none!important;
}
.direction-compass > .direction-card:before,
.direction-compass > .direction-card:after{display:none!important}
.direction-compass .direction-card h3{
font-size:28px!important;
line-height:1.1!important;
margin:0 0 7px!important;
color:#203d27!important;
text-shadow:0 2px 0 rgba(255,255,255,.7)!important;
}
.direction-compass .direction-card p{
max-width:230px!important;
margin:0 auto 10px!important;
font-size:13px!important;
line-height:1.55!important;
color:#506652!important;
}
.direction-compass .direction-card a{
padding:6px 0!important;
background:transparent!important;
border:0!important;
color:#238344!important;
font-size:12px!important;
text-transform:uppercase!important;
letter-spacing:1px!important;
}
.direction-compass .direction-card a:hover{background:transparent!important;color:#d11d89!important;transform:none!important}
/* Four directional zones instead of four cards */
.direction-compass > .direction-north{left:50%!important;top:70px!important;transform:translateX(-50%)!important;width:290px!important}
.direction-compass > .direction-east{right:7%!important;top:50%!important;transform:translateY(-50%)!important;width:300px!important}
.direction-compass > .direction-south{left:50%!important;bottom:58px!important;transform:translateX(-50%)!important;width:300px!important}
.direction-compass > .direction-west{left:7%!important;top:50%!important;transform:translateY(-50%)!important;width:300px!important}
/* Colored directional markers */
.direction-compass .dir-icon{
width:74px!important;height:74px!important;
margin:0 auto 13px!important;
border-radius:50%!important;
display:grid!important;place-items:center!important;
font-size:32px!important;font-weight:800!important;
border:3px solid rgba(255,255,255,.88)!important;
box-shadow:0 10px 28px rgba(44,80,45,.16),inset 0 1px rgba(255,255,255,.7)!important;
position:relative!important;
}
.direction-compass .dir-icon:after{content:"";position:absolute;inset:7px;border:1px dashed rgba(255,255,255,.75);border-radius:50%}
.direction-compass .dir-icon.north{background:linear-gradient(145deg,#44b86b,#168b48)!important;color:#fff!important}
.direction-compass .dir-icon.east{background:linear-gradient(145deg,#f14aaa,#c51d82)!important;color:#fff!important}
.direction-compass .dir-icon.south{background:linear-gradient(145deg,#4ba8df,#2872ae)!important;color:#fff!important}
.direction-compass .dir-icon.west{background:linear-gradient(145deg,#f2b642,#df7f18)!important;color:#fff!important}
/* Center becomes a true compass medallion */
.direction-compass .compass-glow{
position:absolute!important;left:50%!important;top:50%!important;width:390px!important;height:390px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;
background:radial-gradient(circle,rgba(255,255,255,.72) 0 20%,rgba(255,255,255,.18) 48%,transparent 70%)!important;
z-index:2!important;animation:directionGlow 4s ease-in-out infinite!important;
}
.direction-compass .compass-center{
position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
width:180px!important;height:180px!important;border-radius:50%!important;
display:flex!important;align-items:center!important;justify-content:center!important;
background:rgba(255,255,255,.88)!important;
border:7px solid rgba(255,255,255,.72)!important;
box-shadow:0 0 0 2px rgba(54,126,65,.32),0 22px 60px rgba(37,83,40,.22)!important;
z-index:20!important;backdrop-filter:blur(5px)!important;
}
.direction-compass .compass-axis-logo{width:125px!important;height:125px!important;object-fit:contain!important;filter:drop-shadow(0 8px 13px rgba(39,73,40,.18))!important}
.direction-compass .compass-center small{display:none!important}
/* Thin compass axes and decorative rings */
.direction-compass .compass-line{z-index:3!important;opacity:.65!important;background:linear-gradient(90deg,transparent,rgba(48,116,57,.34),transparent)!important}
.direction-compass .compass-v{width:2px!important;height:78%!important;left:50%!important;top:11%!important}
.direction-compass .compass-h{height:2px!important;width:78%!important;left:11%!important;top:50%!important}
.direction-compass:before,
.direction-compass:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(58,119,65,.19);border-radius:50%;pointer-events:none;z-index:4}
.direction-compass:before{width:350px;height:350px}
.direction-compass:after{width:455px;height:455px;border-style:dashed}
/* N/E/S/W labels at the outer edges */
.direction-compass > .compass-arrow{
position:absolute!important;z-index:25!important;display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:none!important;color:#315b39!important;font-weight:900!important;letter-spacing:2px!important;text-transform:uppercase!important;gap:7px!important;
}
.direction-compass > .compass-arrow b{width:52px!important;height:52px!important;border-radius:50%!important;background:rgba(255,255,255,.86)!important;border:3px solid currentColor!important;color:#367b43!important;box-shadow:0 8px 22px rgba(40,85,43,.15)!important;font-size:19px!important}
.direction-compass > .compass-arrow span{font-size:11px!important}
.direction-compass > .arrow-n{left:50%!important;top:18px!important;transform:translateX(-50%)!important;flex-direction:column!important}
.direction-compass > .arrow-e{right:22px!important;top:50%!important;transform:translateY(-50%)!important}
.direction-compass > .arrow-s{left:50%!important;bottom:18px!important;transform:translateX(-50%)!important;flex-direction:column!important}
.direction-compass > .arrow-w{left:22px!important;top:50%!important;transform:translateY(-50%)!important}
.direction-compass > .arrow-e b{color:#c51d82!important}.direction-compass > .arrow-s b{color:#2872ae!important}.direction-compass > .arrow-w b{color:#df7f18!important}
@keyframes directionGlow{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@media(max-width:1000px){
.direction-compass{min-height:760px!important}
.direction-compass > .direction-west{left:3%!important;width:250px!important}
.direction-compass > .direction-east{right:3%!important;width:250px!important}
.direction-compass .direction-card h3{font-size:24px!important}
.direction-compass .direction-card p{font-size:12px!important;max-width:200px!important}
}
@media(max-width:700px){
.directions{padding-top:65px!important}
.directions .section-heading{margin-bottom:30px!important}
.directions .section-heading h2{font-size:34px!important}
.direction-compass{min-height:920px!important}
.direction-compass:before{width:270px;height:270px}
.direction-compass:after{width:350px;height:350px}
.direction-compass .compass-center{width:125px!important;height:125px!important}
.direction-compass .compass-axis-logo{width:88px!important;height:88px!important}
.direction-compass .compass-glow{width:280px!important;height:280px!important}
.direction-compass > .direction-north{top:90px!important;width:230px!important}
.direction-compass > .direction-south{bottom:72px!important;width:230px!important}
.direction-compass > .direction-west{left:50%!important;top:50%!important;transform:translate(-50%,-50%) translateY(170px)!important;width:210px!important}
.direction-compass > .direction-east{right:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%) translateY(-170px)!important;width:210px!important}
.direction-compass .direction-card h3{font-size:21px!important}
.direction-compass .direction-card p{font-size:11px!important;max-width:190px!important}
.direction-compass .dir-icon{width:58px!important;height:58px!important;font-size:25px!important}
.direction-compass > .arrow-e{right:10px!important}.direction-compass > .arrow-w{left:10px!important}
.direction-compass > .arrow-n{top:12px!important}.direction-compass > .arrow-s{bottom:12px!important}
}
@media(max-width:480px){
.direction-compass{min-height:880px!important}
.direction-compass > .direction-north{top:75px!important}
.direction-compass > .direction-south{bottom:58px!important}
.direction-compass > .direction-east{transform:translate(-50%,-50%) translateY(-150px)!important}
.direction-compass > .direction-west{transform:translate(-50%,-50%) translateY(150px)!important}
.direction-compass > .compass-arrow b{width:44px!important;height:44px!important;font-size:16px!important}
.direction-compass > .compass-arrow span{font-size:9px!important}
.direction-compass > .arrow-e{right:5px!important}.direction-compass > .arrow-w{left:5px!important}
}
/* =========================================================
NEW WELCOME MARATHI BANNER
========================================================= */
.welcome-marathi-banner {
position: relative;
background: linear-gradient(135deg, #110e29 0%, #20133a 50%, #110e29 100%);
color: #fff;
padding: 50px 7%;
text-align: center;
overflow: hidden;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.welcome-banner-bg {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(229, 35, 148, 0.15), transparent 70%);
pointer-events: none;
}
.welcome-banner-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.welcome-badge {
display: inline-block;
background: linear-gradient(90deg, #e7178d, #a20873);
color: #fff;
padding: 6px 18px;
border-radius: 30px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(231, 23, 141, 0.4);
}
.welcome-banner-content h2 {
font-size: 36px;
font-weight: 800;
line-height: 1.3;
margin-bottom: 14px;
}
.welcome-banner-content h2 span {
color: #f043b2;
background: linear-gradient(120deg, #f043b2, #ff82d5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.welcome-banner-content p {
font-size: 17px;
color: #d8d4e5;
line-height: 1.8;
max-width: 780px;
margin: 0 auto;
}
.welcome-banner-line {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 25px;
}
.welcome-banner-line span {
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, #e7178d);
}
.welcome-banner-line span:last-child {
background: linear-gradient(90deg, #e7178d, transparent);
}
.welcome-banner-line i {
width: 8px;
height: 8px;
background: #f043b2;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 10px #f043b2;
}
@media (max-width: 768px) {
.welcome-marathi-banner {
padding: 40px 20px;
}
.welcome-banner-content h2 {
font-size: 26px;
}
.welcome-banner-content p {
font-size: 15px;
}
}
/* =========================================================
NEW PREMIUM PROJECTS CARDS DESIGN
========================================================= */
.project-wrap {
position: relative;
padding: 10px 5px;
}
.project-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
overflow: hidden;
}
/* Redesigned Premium Card */
.project-card-new {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
border: 1px solid #eee7f0;
box-shadow: 0 10px 30px rgba(25, 18, 45, 0.07);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
position: relative;
}
.project-card-new:hover {
transform: translateY(-10px);
box-shadow: 0 22px 45px rgba(229, 35, 148, 0.18);
border-color: #f1a2d5;
}
.project-card-img-wrap {
position: relative;
height: 300px;
overflow: hidden;
}
.project-card-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
}
.project-card-new:hover .project-card-img {
transform: scale(1.08);
}
.project-badge-tag {
position: absolute;
top: 14px;
left: 14px;
background: rgba(17, 14, 41, 0.85);
backdrop-filter: blur(8px);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 14px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
gap: 6px;
}
.project-badge-tag::before {
content: "";
width: 6px;
height: 6px;
background: #22c55e;
border-radius: 50%;
box-shadow: 0 0 8px #22c55e;
}
.project-card-body {
padding: 22px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.project-card-title {
font-size: 20px;
font-weight: 700;
color: #17132f;
margin-bottom: 8px;
line-height: 1.3;
}
.project-card-location {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #e6198c;
font-weight: 600;
margin-bottom: 12px;
}
.project-card-city {
font-size: 13px;
color: #726e82;
line-height: 1.5;
margin-bottom: 18px;
}
.project-card-features {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
padding-top: 12px;
border-top: 1px dashed #ede8f0;
}
.project-card-features span {
font-size: 11px;
background: #fdf2f9;
color: #b81775;
padding: 4px 10px;
border-radius: 6px;
font-weight: 600;
}
.project-card-btn {
margin-top: auto;
width: 100%;
background: linear-gradient(100deg, #181330, #2c1d47);
color: #fff;
text-align: center;
padding: 12px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.project-card-new:hover .project-card-btn {
background: linear-gradient(100deg, #e7178d, #c60078);
box-shadow: 0 8px 20px rgba(231, 23, 141, 0.35);
}
@media (max-width: 1100px) {
.project-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.project-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
UPDATED ENQUIRY POPUP STYLES & COMBINED SECTION
========================================================= */
/* 1. Direct Call Numbers in Popup Top Bar */
.popup-top-call-box {
background: linear-gradient(135deg, #181330, #2b1b42);
color: #fff;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 18px;
text-align: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.call-title-tag {
display: block;
font-size: 11px;
font-weight: 700;
color: #f07fca;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.popup-call-numbers {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.popup-call-btn {
font-size: 16px;
font-weight: 800;
color: #fff !important;
background: #d61d8a;
padding: 4px 12px;
border-radius: 20px;
transition: .25s ease;
}
.popup-call-btn:hover {
background: #f02ca3;
transform: translateY(-2px);
}
.call-slash {
font-size: 14px;
color: #8980a3;
}
/* 2. Expert Image & Banner positioning fixes (Banner removed from face) */
.axis-expert-modal {
width: min(520px, 94vw) !important;
}
.axis-expert-person-wrap {
position: relative;
margin-top: 20px;
padding-top: 15px;
border-top: 1px dashed #e2dae6;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.axis-person-speech-bubble {
background: linear-gradient(135deg, #e81d96, #a1086a);
color: #fff;
padding: 10px 16px;
border-radius: 16px 16px 2px 16px;
box-shadow: 0 8px 20px rgba(229, 29, 150, 0.25);
font-size: 13px;
line-height: 1.3;
margin-bottom: 10px;
flex: 1;
max-width: 220px;
}
.axis-person-speech-bubble span {
display: block;
font-size: 11px;
color: #ffd2f0;
}
.axis-person-image-container {
width: 140px;
height: 140px;
flex: none;
border-radius: 50%;
overflow: hidden;
border: 4px solid #fce3f3;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
background: #f5f0f6;
}
.axis-person-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* 3. Combined Why & Plot Info Section */
.why-combined {
background: linear-gradient(135deg, #fff 0%, #faf6fb 100%);
padding: 80px 7%;
}
.why-combined-header {
text-align: center;
max-width: 800px;
margin: 0 auto 45px;
}
.why-combined-header h2 {
font-size: 40px;
line-height: 1.25;
}
.why-combined-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 40px;
align-items: center;
margin-bottom: 50px;
}
.why-features-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.why-feature-card {
display: flex;
align-items: flex-start;
gap: 18px;
background: #fff;
padding: 20px 24px;
border-radius: 16px;
border: 1px solid #efe4ec;
box-shadow: 0 8px 24px rgba(28, 18, 45, 0.04);
transition: .35s ease;
}
.why-feature-card:hover {
transform: translateY(-4px);
border-color: #ea7fbf;
box-shadow: 0 12px 30px rgba(214, 31, 139, 0.1);
}
.why-card-icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 12px;
background: linear-gradient(145deg, #e7178d, #9f086f);
color: #fff;
display: grid;
place-items: center;
font-size: 22px;
font-weight: 700;
}
.why-feature-card h3 {
font-size: 18px;
color: #242038;
margin-bottom: 4px;
}
.why-feature-card p {
font-size: 13px;
color: #6d6b7c;
line-height: 1.6;
}
.why-visual-box {
position: relative;
min-height: 380px;
}
.why-image-card {
position: absolute;
inset: 0 0 30px 20px;
border-radius: 24px;
background: url('golden-horizon.png') center/cover;
box-shadow: 16px 16px 0 #f3d2e7;
}
.why-badge-orb {
position: absolute;
left: 0;
bottom: 0;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(145deg, #ed2ba4, #9f086e);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 16px 35px rgba(151, 8, 105, 0.28);
text-align: center;
}
.why-badge-orb strong {
font-size: 28px;
line-height: 1;
}
.why-badge-orb span {
font-size: 9px;
margin-top: 4px;
}
@media(max-width: 800px) {
.why-combined-grid {
grid-template-columns: 1fr;
}
.why-visual-box {
min-height: 300px;
}
}
/* =========================================================
SCOPED ENQUIRY & EXPERT POPUP STYLES
(Isolated to avoid affecting other page components)
========================================================= */
/* Base Overlay */
.enquiry-popup,
.axis-expert-popup {
position: fixed !important;
inset: 0 !important;
z-index: 5000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 25px !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.enquiry-popup.show,
.axis-expert-popup.show {
opacity: 1 !important;
visibility: visible !important;
}
/* Backdrop Blur & Dimmer */
.enquiry-backdrop {
position: absolute !important;
inset: 0 !important;
background: rgba(10, 8, 25, 0.72) !important;
backdrop-filter: blur(7px) !important;
-webkit-backdrop-filter: blur(7px) !important;
}
/* Close Button */
.popup-close {
position: absolute !important;
right: 14px !important;
top: 12px !important;
z-index: 10 !important;
width: 36px !important;
height: 36px !important;
border: 0 !important;
border-radius: 50% !important;
background: #18152f !important;
color: #fff !important;
font-size: 25px !important;
line-height: 1 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.25s ease !important;
}
.popup-close:hover {
background: #e52394 !important;
}
/* ---------------------------------------------------------
Standard Enquiry Modal Box
--------------------------------------------------------- */
.enquiry-modal {
position: relative !important;
z-index: 2 !important;
width: min(450px, 100%) !important;
transform: translateY(25px) scale(0.96);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.enquiry-popup.show .enquiry-modal {
transform: translateY(0) scale(1) !important;
}
.enquiry-modal .callback-card {
position: relative !important;
top: auto !important;
right: auto !important;
width: 100% !important;
animation: none !important;
box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4) !important;
background: #ffffff !important;
border-radius: 14px !important;
padding: 24px !important;
color: #363448 !important;
}
.enquiry-modal .callback-card h3 {
font-size: 24px !important;
text-align: center !important;
}
.enquiry-modal .callback-card > p {
font-size: 12px !important;
text-align: center !important;
margin: 4px 0 14px !important;
}
.enquiry-modal .callback-card input,
.enquiry-modal .callback-card select,
.enquiry-modal .callback-card textarea {
font-size: 12px !important;
padding: 12px !important;
width: 100% !important;
border: 1px solid #dfe0e8 !important;
border-radius: 6px !important;
background: #fafbfc !important;
outline-color: #dd1b90 !important;
}
/* ---------------------------------------------------------
Axis Expert Modal Box
--------------------------------------------------------- */
.axis-expert-modal {
position: relative !important;
z-index: 2 !important;
width: min(1080px, 96vw) !important;
transform: translateY(25px) scale(0.97) !important;
opacity: 0;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}
.axis-expert-popup.show .axis-expert-modal {
transform: translateY(0) scale(1) !important;
opacity: 1 !important;
}
.axis-expert-card {
width: 100% !important;
min-height: 590px !important;
display: grid !important;
grid-template-columns: 55% 45% !important;
position: relative !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 30px !important;
background: linear-gradient(110deg, #fff 0%, #fff9fc 58%, #ffe8f4 100%) !important;
box-shadow: 0 35px 100px rgba(0, 0, 0, 0.42) !important;
}
.axis-expert-copy {
padding: 46px 35px 32px 50px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
position: relative !important;
z-index: 6 !important;
}
.axis-greeting {
width: max-content !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
padding: 13px 22px !important;
margin: 3px 0 16px !important;
border-radius: 18px 18px 18px 4px !important;
color: #fff !important;
background: linear-gradient(135deg, #e600a7, #b90a7e) !important;
box-shadow: 0 12px 30px rgba(208, 0, 145, 0.20) !important;
}
.axis-greeting span { font-size: 23px !important; font-weight: 700 !important; }
.axis-greeting strong { font-size: 31px !important; line-height: 1.12 !important; }
.axis-expert-copy h3 {
font-size: 28px !important;
text-align: left !important;
margin: 0 0 10px !important;
}
.axis-expert-copy h3 span { color: #d40091 !important; }
.axis-expert-description {
max-width: 560px !important;
font-size: 16px !important;
line-height: 1.65 !important;
color: #35384a !important;
margin: 0 0 8px !important;
text-align: left !important;
}
.axis-expert-description.secondary {
color: #737687 !important;
font-size: 14px !important;
}
.axis-expert-benefits {
display: flex !important;
margin: 12px 0 17px !important;
}
.axis-expert-benefits > div {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border-right: 1px solid #e3dfe4 !important;
text-align: left !important;
}
.axis-expert-benefits > div:first-child { justify-content: flex-start !important; }
.axis-expert-benefits > div:last-child { border-right: 0 !important; }
.axis-expert-benefits span {
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
background: #ffe1f2 !important;
color: #d40091 !important;
font-size: 19px !important;
font-weight: 800 !important;
}
.axis-expert-benefits b {
font-size: 10px !important;
line-height: 1.35 !important;
color: #35384a !important;
}
.axis-phone-row {
width: 100% !important;
max-width: 520px !important;
height: 60px !important;
display: flex !important;
align-items: center !important;
padding: 0 18px !important;
border: 2px solid #dedce4 !important;
border-radius: 34px !important;
background: #fff !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.axis-phone-row:focus-within {
border-color: #df008f !important;
box-shadow: 0 0 0 4px rgba(223, 0, 143, 0.08) !important;
}
.axis-phone-icon {
color: #df008f !important;
font-size: 21px !important;
}
.axis-country-code {
margin-left: 10px !important;
padding: 0 13px !important;
border-left: 1px solid #ddd !important;
font-weight: 700 !important;
color: #303344 !important;
}
.axis-phone-row input {
width: 100% !important;
min-width: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
padding: 0 5px !important;
margin: 0 !important;
font: 15px Poppins, Arial, sans-serif !important;
color: #1f2638 !important;
}
.axis-call-button {
max-width: 520px !important;
height: 58px !important;
margin-top: 12px !important;
border-radius: 32px !important;
font-size: 17px !important;
}
.axis-call-button b { margin-left: 8px !important; font-size: 22px !important; }
.axis-security {
margin-top: 9px !important;
font-size: 10px !important;
color: #7a7c88 !important;
text-align: left !important;
}
/* Representative Graphic Side */
.axis-expert-person {
position: relative !important;
min-height: 590px !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
overflow: visible !important;
z-index: 4 !important;
}
.axis-person-light {
position: absolute !important;
width: 470px !important;
height: 470px !important;
right: 4% !important;
bottom: 20px !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(225, 0, 153, 0.17), rgba(225, 0, 153, 0) 68%) !important;
filter: blur(8px) !important;
animation: axisPersonGlow 3.5s ease-in-out infinite !important;
}
.axis-person-image {
position: absolute !important;
width: min(520px, 112%) !important;
max-height: 625px !important;
height: auto !important;
right: -34px !important;
bottom: 0 !important;
object-fit: contain !important;
object-position: bottom center !important;
transform: translateX(180px) !important;
opacity: 0 !important;
filter: drop-shadow(0 25px 28px rgba(0, 0, 0, 0.17)) !important;
transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.65s ease 0.12s !important;
z-index: 5 !important;
}
.axis-expert-popup.show .axis-person-image {
transform: translateX(0) !important;
opacity: 1 !important;
}
.axis-person-speech {
position: absolute !important;
right: 18px !important;
top: 62px !important;
z-index: 9 !important;
width: 175px !important;
padding: 14px 15px !important;
border-radius: 20px 20px 4px 20px !important;
background: #fff !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.13) !important;
transform: rotate(-3deg) !important;
}
.axis-person-speech span { display: block !important; font-size: 12px !important; color: #404353 !important; }
.axis-person-speech strong {
display: block !important;
color: #d40091 !important;
font-family: cursive, sans-serif !important;
font-size: 20px !important;
line-height: 1.1 !important;
}
.axis-person-contact {
position: absolute !important;
right: 8px !important;
bottom: 20px !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 15px !important;
border-radius: 32px !important;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
}
.axis-person-contact > span {
width: 39px !important;
height: 39px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
background: #ffe0f2 !important;
color: #d40091 !important;
font-size: 19px !important;
}
.axis-person-contact small { display: block !important; font-size: 9px !important; color: #3c4050 !important; }
.axis-person-contact strong { display: block !important; font-size: 12px !important; color: #171d2d !important; }
@keyframes axisPersonGlow {
0%, 100% { transform: scale(0.94); opacity: 0.62; }
50% { transform: scale(1.06); opacity: 1; }
}
/* ---------------------------------------------------------
Responsive Popup Overrides
--------------------------------------------------------- */
@media (max-width: 800px) {
.axis-expert-modal {
width: min(520px, 94vw) !important;
}
.axis-expert-card {
min-height: auto !important;
max-height: 92vh !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
border-radius: 24px !important;
}
.axis-expert-copy { padding: 38px 22px 18px !important; }
.axis-greeting { width: 100% !important; padding: 12px 17px !important; }
.axis-greeting span { font-size: 20px !important; }
.axis-greeting strong { font-size: 26px !important; }
.axis-expert-copy h3 { font-size: 23px !important; }
.axis-expert-description { font-size: 14px !important; }
.axis-expert-description.secondary { font-size: 12px !important; }
.axis-expert-benefits { margin-bottom: 14px !important; }
.axis-expert-benefits span { width: 34px !important; height: 34px !important; flex-basis: 34px !important; font-size: 15px !important; }
.axis-expert-benefits b { font-size: 8px !important; }
.axis-phone-row { height: 54px !important; }
.axis-call-button { height: 54px !important; font-size: 15px !important; }
.axis-security { text-align: center !important; }
.axis-expert-person { min-height: 275px !important; margin-top: 0 !important; }
.axis-person-image {
width: 310px !important;
max-height: 330px !important;
right: 50% !important;
transform: translateX(calc(50% + 150px)) !important;
}
.axis-expert-popup.show .axis-person-image {
transform: translateX(50%) !important;
}
.axis-person-light {
width: 280px !important;
height: 280px !important;
right: 50% !important;
transform: translateX(50%) !important;
}
.axis-person-speech { top: 16px !important; right: 10px !important; width: 140px !important; padding: 10px 11px !important; }
.axis-person-speech strong { font-size: 16px !important; }
.axis-person-contact {
right: 50% !important;
transform: translateX(50%) !important;
bottom: 8px !important;
width: max-content !important;
max-width: 92% !important;
padding: 7px 11px !important;
}
.axis-person-contact > span { width: 31px !important; height: 31px !important; font-size: 14px !important; }
.axis-person-contact small { font-size: 8px !important; }
.axis-person-contact strong { font-size: 9px !important; }
}
@media (max-width: 520px) {
.axis-expert-copy { padding: 34px 17px 15px !important; }
.axis-expert-copy h3 { font-size: 21px !important; }
.axis-expert-description { font-size: 13px !important; }
.axis-expert-benefits > div { gap: 4px !important; }
.axis-expert-benefits b { font-size: 7px !important; }
.axis-person-image { width: 280px !important; max-height: 300px !important; }
.axis-expert-person { min-height: 255px !important; }
.axis-person-speech { width: 125px !important; }
}
/* =========================================================
AXIS DEVELOPERS — POPUP RESTORE / FINAL OVERRIDE
Restores the earlier compact expert-popup presentation.
Scoped only to #enquiryPopup so the rest of the site is untouched.
========================================================= */
#enquiryPopup.axis-expert-popup{
position:fixed!important;
inset:0!important;
z-index:6000!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:20px!important;
opacity:0;
visibility:hidden;
pointer-events:none;
background:transparent!important;
transition:opacity .32s ease,visibility .32s ease!important;
}
#enquiryPopup.axis-expert-popup.show{
opacity:1!important;
visibility:visible!important;
pointer-events:auto;
}
#enquiryPopup .enquiry-backdrop{
position:absolute!important;
inset:0!important;
background:rgba(12,10,28,.70)!important;
backdrop-filter:blur(5px)!important;
-webkit-backdrop-filter:blur(5px)!important;
}
#enquiryPopup .axis-expert-modal{
position:relative!important;
z-index:2!important;
width:min(540px,94vw)!important;
max-width:540px!important;
margin:0!important;
transform:translateY(24px) scale(.96)!important;
opacity:0;
transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease!important;
}
#enquiryPopup.show .axis-expert-modal{
transform:translateY(0) scale(1)!important;
opacity:1!important;
}
#enquiryPopup .axis-expert-card{
width:100%!important;
min-height:0!important;
max-height:calc(100vh - 40px)!important;
display:block!important;
position:relative!important;
top:auto!important;
right:auto!important;
padding:24px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
border:1px solid rgba(255,255,255,.9)!important;
border-radius:18px!important;
background:#fff!important;
color:#363448!important;
box-shadow:0 30px 80px rgba(0,0,0,.42)!important;
animation:none!important;
}
#enquiryPopup .axis-expert-card:before{display:none!important}
#enquiryPopup .popup-close{
position:absolute!important;
top:10px!important;
right:10px!important;
z-index:20!important;
width:34px!important;
height:34px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
border:0!important;
border-radius:50%!important;
background:#18152f!important;
color:#fff!important;
font-size:23px!important;
line-height:1!important;
cursor:pointer!important;
box-shadow:0 5px 15px rgba(0,0,0,.16)!important;
}
#enquiryPopup .popup-close:hover{background:#e52394!important}
/* Direct-call strip */
#enquiryPopup .popup-top-call-box{
margin:0 0 16px!important;
padding:11px 12px!important;
border-radius:11px!important;
background:linear-gradient(135deg,#181330,#2b1b42)!important;
box-shadow:0 7px 18px rgba(0,0,0,.13)!important;
text-align:center!important;
}
#enquiryPopup .call-title-tag{
display:block!important;
margin-bottom:5px!important;
color:#f07fca!important;
font-size:10px!important;
font-weight:700!important;
}
#enquiryPopup .popup-call-numbers{gap:8px!important}
#enquiryPopup .popup-call-btn{
padding:4px 10px!important;
border-radius:18px!important;
background:#d61d8a!important;
color:#fff!important;
font-size:14px!important;
font-weight:800!important;
}
/* Main content */
#enquiryPopup .axis-expert-copy{
width:100%!important;
padding:0!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
position:relative!important;
z-index:6!important;
}
#enquiryPopup .axis-expert-copy h3{
margin:2px 0 8px!important;
font-size:23px!important;
line-height:1.3!important;
text-align:center!important;
color:#25243a!important;
}
#enquiryPopup .axis-expert-description{
max-width:none!important;
margin:0 0 8px!important;
padding:10px 12px!important;
border-radius:9px!important;
background:#fff4fa!important;
color:#35384a!important;
font-size:12px!important;
line-height:1.65!important;
text-align:center!important;
}
#enquiryPopup .axis-expert-description.secondary{
margin-bottom:10px!important;
background:#f7f8fb!important;
color:#737687!important;
font-size:11px!important;
}
#enquiryPopup .axis-expert-benefits{
display:flex!important;
width:100%!important;
margin:8px 0 13px!important;
}
#enquiryPopup .axis-expert-benefits>div{
flex:1!important;
min-width:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
border-right:1px solid #e5e1e6!important;
}
#enquiryPopup .axis-expert-benefits>div:last-child{border-right:0!important}
#enquiryPopup .axis-expert-benefits span{
width:34px!important;height:34px!important;flex:0 0 34px!important;
display:grid!important;place-items:center!important;
border-radius:50%!important;
background:#ffe1f2!important;color:#d40091!important;
font-size:15px!important;
}
#enquiryPopup .axis-expert-benefits b{
font-size:8px!important;line-height:1.3!important;color:#35384a!important;
}
#enquiryPopup .axis-phone-row{
width:100%!important;
max-width:none!important;
height:52px!important;
display:flex!important;
align-items:center!important;
padding:0 15px!important;
border:2px solid #dedce4!important;
border-radius:28px!important;
background:#fff!important;
}
#enquiryPopup .axis-phone-icon{font-size:19px!important;color:#df008f!important}
#enquiryPopup .axis-country-code{margin-left:8px!important;padding:0 10px!important;font-size:13px!important}
#enquiryPopup .axis-phone-row input{
width:100%!important;min-width:0!important;
border:0!important;outline:0!important;background:transparent!important;
padding:0 5px!important;margin:0!important;
font:13px Poppins,Arial,sans-serif!important;color:#1f2638!important;
}
#enquiryPopup .axis-call-button{
width:100%!important;
max-width:none!important;
height:52px!important;
margin-top:10px!important;
padding:0 18px!important;
border-radius:28px!important;
font-size:14px!important;
}
#enquiryPopup .axis-call-button b{font-size:19px!important;margin-left:6px!important}
#enquiryPopup .axis-security{
display:block!important;
margin-top:7px!important;
font-size:8px!important;
color:#858694!important;
text-align:center!important;
}
/* Expert image: use the actual classes present in the current HTML. */
#enquiryPopup .axis-expert-person-wrap{
position:relative!important;
width:100%!important;
min-height:145px!important;
margin:16px 0 0!important;
padding:14px 4px 0!important;
border-top:1px dashed #e2dae6!important;
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:12px!important;
}
#enquiryPopup .axis-person-speech-bubble{
flex:1!important;
max-width:245px!important;
margin:0 0 10px!important;
padding:11px 15px!important;
border-radius:16px 16px 3px 16px!important;
background:linear-gradient(135deg,#e81d96,#a1086a)!important;
color:#fff!important;
box-shadow:0 8px 20px rgba(229,29,150,.24)!important;
font-size:13px!important;
line-height:1.35!important;
}
#enquiryPopup .axis-person-speech-bubble span{
display:block!important;
margin:0!important;
color:#ffd2f0!important;
font-size:10px!important;
}
#enquiryPopup .axis-person-speech-bubble strong{
display:block!important;
color:#fff!important;
font-size:17px!important;
line-height:1.2!important;
}
#enquiryPopup .axis-person-image-container{
width:135px!important;
height:135px!important;
flex:0 0 135px!important;
border-radius:50%!important;
overflow:hidden!important;
border:4px solid #fce3f3!important;
background:#f5f0f6!important;
box-shadow:0 10px 25px rgba(0,0,0,.12)!important;
}
#enquiryPopup .axis-person-image{
position:static!important;
width:100%!important;
height:100%!important;
max-height:none!important;
transform:none!important;
opacity:1!important;
object-fit:cover!important;
object-position:top center!important;
filter:none!important;
}
@media(max-width:600px){
#enquiryPopup.axis-expert-popup{padding:12px!important}
#enquiryPopup .axis-expert-modal{width:min(520px,96vw)!important;max-width:520px!important}
#enquiryPopup .axis-expert-card{
max-height:calc(100vh - 24px)!important;
padding:18px!important;
border-radius:16px!important;
}
#enquiryPopup .popup-top-call-box{padding:9px 8px!important;margin-bottom:12px!important}
#enquiryPopup .popup-call-btn{font-size:12px!important;padding:3px 8px!important}
#enquiryPopup .axis-expert-copy h3{font-size:20px!important}
#enquiryPopup .axis-expert-description{font-size:11px!important;padding:8px 9px!important}
#enquiryPopup .axis-expert-description.secondary{font-size:10px!important}
#enquiryPopup .axis-expert-benefits{margin:7px 0 11px!important}
#enquiryPopup .axis-expert-benefits span{width:30px!important;height:30px!important;flex-basis:30px!important;font-size:13px!important}
#enquiryPopup .axis-expert-benefits b{font-size:7px!important}
#enquiryPopup .axis-phone-row{height:48px!important}
#enquiryPopup .axis-call-button{height:49px!important;font-size:13px!important}
#enquiryPopup .axis-expert-person-wrap{min-height:118px!important;margin-top:12px!important;padding-top:10px!important}
#enquiryPopup .axis-person-speech-bubble{max-width:185px!important;padding:8px 10px!important;font-size:11px!important}
#enquiryPopup .axis-person-speech-bubble strong{font-size:14px!important}
#enquiryPopup .axis-person-image-container{width:105px!important;height:105px!important;flex-basis:105px!important}
}
@media(max-width:380px){
#enquiryPopup .axis-expert-card{padding:14px!important}
#enquiryPopup .axis-person-speech-bubble{max-width:160px!important}
#enquiryPopup .axis-person-image-container{width:92px!important;height:92px!important;flex-basis:92px!important}
}
/* ==================== OUR TEAM SECTION (Updated with Fixed Image Size & Call Button) ==================== */
.axis-team-section {
padding: 100px 7%;
background: radial-gradient(circle at 50% 0%, rgba(232, 58, 158, 0.08) 0%, rgba(255, 255, 255, 0) 70%),
linear-gradient(180deg, #ffffff 0%, #f7f4f9 100%);
position: relative;
overflow: hidden;
}
.axis-team-container {
max-width: 1280px;
margin: 0 auto;
}
.axis-team-header {
text-align: center;
margin-bottom: 70px;
}
.axis-team-heading {
font-size: 42px;
line-height: 1.2;
color: #1a1928;
font-weight: 800;
letter-spacing: -0.5px;
}
.axis-team-heading span {
color: #e83a9e;
position: relative;
display: inline-block;
}
.axis-team-heading span::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 4px;
background: rgba(232, 58, 158, 0.25);
border-radius: 2px;
}
.axis-team-subtitle {
font-size: 16px;
color: #6c6b80;
margin-top: 12px;
max-width: 620px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
.axis-team-grid-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 35px;
}
.axis-team-grid {
display: grid;
padding: 50px 0;
grid-template-columns: repeat(4, 1fr);
gap: 35px;
justify-items: center;
}
/* ==================== ELEGANT CARD STYLING ==================== */
.axis-team-card {
background: #ffffff;
border: 1px solid rgba(232, 58, 158, 0.12);
border-radius: 24px;
box-shadow: 0 15px 35px rgba(26, 25, 40, 0.04), 0 5px 15px rgba(232, 58, 158, 0.03);
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-width: 360px;
height: auto !important;
min-height: 440px;
padding: 24px;
text-align: center;
/* Original Animation Preservation */
opacity: 0 !important;
transform: translateY(-60px) scale(0.95) !important;
will-change: transform, opacity;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease,
border-color 0.4s ease,
opacity 0.4s ease;
}
.axis-team-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 140px;
border-radius: 24px 24px 0 0;
pointer-events: none;
}
.axis-team-card.axis-team-dropped {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
transition: opacity 0.65s ease,
transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.axis-team-card:hover {
transform: translateY(-10px) !important;
border-color: rgba(232, 58, 158, 0.35);
box-shadow: 0 25px 50px rgba(232, 58, 158, 0.15), 0 10px 20px rgba(26, 25, 40, 0.04);
}
/* ==================== FLOATING IMAGE FRAME (250px x 250px FIXED) ==================== */
.axis-team-image-wrap {
position: relative;
width: 250px !important;
height: 250px !important;
flex-shrink: 0;
margin: 0 auto 16px auto;
border-radius: 5%;
background: linear-gradient(135deg, #f8f4f9 0%, #eee5f0 100%);
overflow: hidden;
box-shadow: 0 8px 25px rgba(232, 58, 158, 0.15);
border: 4px solid #ffffff;
outline: 2px solid rgba(232, 58, 158, 0.2);
transition: transform 0.5s ease, outline-color 0.4s ease, box-shadow 0.4s ease;
}
.axis-team-card:hover .axis-team-image-wrap {
transform: scale(1.05);
outline-color: #e83a9e;
box-shadow: 0 12px 30px rgba(232, 58, 158, 0.3);
}
.axis-team-image-loader {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 50%;
background: linear-gradient(90deg, #f3edf5 0%, #e8dde8 50%, #f3edf5 100%);
background-size: 200% 100%;
animation: axisTeamShimmer 1.6s infinite linear;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
@keyframes axisTeamShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.axis-team-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
filter: blur(8px);
opacity: 0;
transform: scale(1.06);
transition: filter 0.5s ease, opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
z-index: 2;
}
.axis-team-card.axis-team-loaded .axis-team-image-loader {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none;
}
.axis-team-card.axis-team-loaded .axis-team-image {
filter: blur(0) !important;
opacity: 1 !important;
transform: scale(1);
}
.axis-team-card:hover .axis-team-image {
transform: scale(1.08);
}
.axis-team-image-shine {
position: absolute;
top: 0;
left: -100%;
z-index: 3;
display: block;
width: 60%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
pointer-events: none;
}
.axis-team-card:hover .axis-team-image-shine {
animation: axisTeamShine 0.9s ease-in-out forwards;
}
@keyframes axisTeamShine {
100% { left: 140%; }
}
/* ==================== CARD CONTENT & CALL BUTTON ==================== */
.axis-team-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
position: relative;
z-index: 2;
}
.axis-team-name {
font-size: 19px;
font-weight: 700;
color: #1a1928;
line-height: 1.3;
margin-bottom: 8px;
letter-spacing: -0.2px;
}
.axis-team-role {
font-size: 12px;
font-weight: 700;
color: #e83a9e;
background: rgba(232, 58, 158, 0.08);
border: 1px solid rgba(232, 58, 158, 0.18);
padding: 5px 16px;
border-radius: 50px;
display: inline-block;
letter-spacing: 0.3px;
transition: all 0.3s ease;
}
.axis-team-card:hover .axis-team-role {
background: #e83a9e;
color: #ffffff;
border-color: #e83a9e;
box-shadow: 0 4px 12px rgba(232, 58, 158, 0.3);
}
/* Call Now Button Style (Navbar Dark BG & Pink Hover Contrast) */
.axis-team-call-btn {
margin-top: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #17132f;
color: #ffffff !important;
font-size: 12px;
font-weight: 700;
padding: 7px 20px;
border-radius: 50px;
text-decoration: none;
border: 1px solid rgba(232, 58, 158, 0.2);
box-shadow: 0 4px 12px rgba(23, 19, 47, 0.15);
transition: all 0.3s ease;
}
.axis-team-call-btn:hover {
color: #ffffff !important;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(232, 58, 158, 0.35);
}
/* ==================== RESPONSIVE BREAKPOINTS ==================== */
@media (max-width: 1200px) {
.axis-team-grid {
grid-template-columns: repeat(3, 1fr);
padding: 30px 10px;
gap: 25px;
}
}
@media (max-width: 992px) {
.axis-team-section {
padding: 70px 5%;
}
.axis-team-header {
margin-bottom: 40px;
}
.axis-team-heading {
font-size: 34px;
}
.axis-team-grid-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-items: center;
margin-bottom: 25px;
}
.axis-team-grid {
grid-template-columns: repeat(2, 1fr);
padding: 10px 0;
gap: 20px;
}
.axis-team-card {
padding: 20px;
}
.axis-team-image-wrap {
width: 210px !important;
height: 210px !important;
}
}
@media (max-width: 600px) {
.axis-team-section {
padding: 50px 16px;
}
.axis-team-header {
margin-bottom: 30px;
}
.axis-team-heading {
font-size: 28px;
}
.axis-team-subtitle {
font-size: 14px;
}
.axis-team-grid-inner,
.axis-team-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0;
}
.axis-team-card {
max-width: 100%;
padding: 18px;
}
.axis-team-image-wrap {
width: 190px !important;
height: 190px !important;
}
.axis-team-name {
font-size: 18px;
}
.axis-team-role {
font-size: 11px;
padding: 4px 12px;
}
}
/* GOOGLE REVIEW */
.review-action-section {
padding: 50px 20px;
background: linear-gradient(135deg, #fdfbfd 0%, #ffffff 50%, #f7f3f9 100%);
font-family: 'Mukta', sans-serif;
}
.review-action-container {
max-width: 960px;
margin: 0 auto;
}
.rating-box-card {
background: #ffffff;
border: 1px solid #efe2eb;
border-radius: 20px;
padding: 30px;
display: flex;
align-items: center;
gap: 24px;
box-shadow: 0 10px 30px rgba(27, 18, 45, 0.05);
position: relative;
overflow: hidden;
transition: all 0.35s ease;
}
.rating-box-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(223, 25, 137, 0.15);
border-color: #f0a4d4;
}
.rating-box-card::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 20%;
height: 200%;
background: rgba(255, 255, 255, 0.3);
transform: rotate(30deg);
transition: none;
opacity: 0;
}
.rating-box-card:hover::after {
left: 130%;
transition: all 0.8s ease-in-out;
opacity: 1;
}
.g-brand-icon {
background: #fcf4f9;
border: 1px solid #f3dbe8;
padding: 16px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.g-rating-content {
flex-grow: 1;
}
.review-tag {
font-size: 0.8rem;
font-weight: 700;
color: #df1989;
letter-spacing: 0.8px;
text-transform: uppercase;
display: block;
margin-bottom: 2px;
}
.g-rating-content h3 {
font-size: 1.35rem;
color: #17132f;
margin: 0 0 6px 0;
font-weight: 700;
}
.stars-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.star-rating {
color: #ffb400;
font-size: 1.25rem;
letter-spacing: 2px;
}
.rating-text {
font-size: 0.95rem;
color: #555365;
}
.review-subtext {
font-size: 0.875rem;
color: #777588;
margin: 0;
}
.direct-review-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #df1989, #910d65);
color: #ffffff;
padding: 12px 24px;
border-radius: 50px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 6px 18px rgba(223, 25, 137, 0.28);
transition: all 0.3s ease;
white-space: nowrap;
}
.direct-review-btn:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 10px 25px rgba(223, 25, 137, 0.42);
color: #ffffff;
}
@media (max-width: 767px) {
.review-action-section {
padding: 40px 16px;
}
.rating-box-card {
flex-direction: column;
text-align: center;
padding: 24px 20px;
gap: 16px;
}
.stars-row {
justify-content: center;
}
.g-action-btn-wrap {
width: 100%;
}
.direct-review-btn {
width: 100%;
justify-content: center;
}
}
.app-download-section{margin:0 7%;padding:55px 50px;border-radius:24px;background:linear-gradient(110deg,#181330,#30204c);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px}
.app-download-section h2{font-size:38px;line-height:1.25;margin:8px 0}.app-download-section p:not(.section-tag){font-size:16px;color:#d3cfdd;max-width:650px}
.play-store{display:inline-flex;align-items:center;gap:12px;padding:10px 18px;background:#090909;color:#fff!important;border-radius:10px;border:1px solid #555;min-width:165px}
.play-store small{display:block;font-size:8px;line-height:1}.play-store b{display:block;font-size:18px;line-height:1.2}.play-icon{font-size:25px}.play-store.large{flex:none;padding:13px 22px}
/* ==================== FOOTER FIXED CSS ==================== */
/* ग्रिड लेआउट */
.footer-grid {
display: grid;
grid-template-columns: 1.35fr 0.8fr 1fr 1.1fr;
gap: 30px;
align-items: start;
}
/* लोगो आणि टेक्स्टची जोडणी */
.footer-logo {
width: auto;
height: auto;
border-radius: 0;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
margin-bottom: 12px; /* लोगो आणि पॅराग्राफमध्ये योग्य अंतर */
}
.footer-logo .logo-image {
width: 50px;
height: 50px;
object-fit: contain;
}
.footer-logo .logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
/* चुकून font-size मध्ये लिहिलेले मार्जिन फिक्स केले आहे */
.footer-logo .logo-text strong {
font-size: 20px;
color: #ffffff;
margin: 0;
}
.footer-logo .logo-text small {
font-size: 20px;
color: #e58abb;
}
/* पैराग्राफ मधील जास्तीचे पॅडिंग काढले */
.footer-grid p {
padding: 0;
margin-top: 0;
margin-bottom: 12px;
font-size: 14px; /* वाचायला सोपे जाण्यासाठी योग्य फॉन्ट साईझ */
line-height: 1.6;
}
.footer-grid a {
font-size: 14px;
text-decoration: none;
display: block;
margin-bottom: 8px;
}
/* Play Store बटणाची लहान व आकर्षक डिझाईन */
.app-download h3 {
margin-bottom: 8px;
}
.app-download .play-store {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
background: #000000;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 6px 14px; /* बॉक्स लहान ठेवण्यासाठी */
border-radius: 8px;
text-decoration: none;
width: fit-content;
transition: all 0.3s ease;
}
.app-download .play-store:hover {
border-color: #e58abb;
transform: translateY(-2px);
}
.app-download .play-store .play-icon {
font-size: 14px;
color: #e58abb;
}
.app-download .play-store span:last-child {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.app-download .play-store small {
font-size: 9px;
color: #aaa;
text-transform: uppercase;
}
.app-download .play-store b {
font-size: 13px;
color: #ffffff;
}
/* सोशल मीडिया आयकॉन */
.socials {
display: flex;
gap: 10px;
margin-top: 10px;
}
.socials a {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
.visitor-counter-box {
display: inline-flex;
align-items: center;
gap: 18px;
background: rgba(255, 255, 255, 0.05);
margin-top: 20px;
padding: 8px 18px;
border-radius: 30px;
backdrop-filter: blur(5px);
}
.visitor-icon {
font-size: 16px;
color: #ee43ae;
}
.visitor-label {
font-size: 12px;
color: #ccc;
font-weight: 500;
}
.visitor-count {
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(100deg, #e7178d, #c60078);
padding: 2px 10px;
border-radius: 12px;
letter-spacing: 1px;
box-shadow: 0 2px 8px rgba(231, 23, 141, 0.4);
}
/* =========================================================
AXIS DEVELOPERS — COMPLETE MEDIA RESPONSIVENESS OVERRIDES
========================================================= */
/* --- Base Box Sizing & Fluid Images --- */
*, *::before, *::after {
max-width: 100%;
}
img, svg, iframe, video {
max-width: 100%;
height: auto;
}
/* --- Responsive Utility Classes & Global Tweaks --- */
@media (max-width: 1200px) {
/* Navigation & Top Bar Adjustments */
header {
height: auto;
}
.header-main {
max-width: 100%;
padding: 0 4%;
}
nav {
gap: 16px;
}
nav a {
font-size: 13px;
padding: 20px 0;
}
/* Grid Adjustments */
.testimonial-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
.footer-grid {
grid-template-columns: 1.2fr 1fr 1fr 1fr !important;
gap: 24px !important;
}
.location-road-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 992px) {
/* Header & Navigation Mobile Layout */
.header-top {
display: none; /* Hide top bar on smaller viewports for space */
}
.header-main {
height: 70px;
justify-content: space-between;
}
.logo {
width: auto !important;
height: 50px !important;
}
.logo-image {
width: 45px !important;
height: 45px !important;
}
.logo-text strong {
font-size: 18px !important;
}
/* Mobile Drawer Menu Toggle */
.mobile-menu {
display: block !important;
cursor: pointer;
font-size: 26px;
color: #fff;
background: none;
border: none;
}
.header-actions {
display: none !important;
}
nav {
display: none;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: #15142f;
flex-direction: column;
padding: 20px 5%;
gap: 0;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
z-index: 999;
}
nav.open {
display: flex !important;
}
nav a {
padding: 14px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
width: 100%;
text-align: left;
font-size: 15px;
}
nav .active::after {
display: none;
}
/* Hero Section */
.hero {
min-height: auto !important;
padding: 40px 5% !important;
}
.hero h1 {
font-size: 38px !important;
}
.hero-content {
max-width: 100% !important;
padding: 20px !important;
}
.hero-content > p {
font-size: 16px !important;
}
/* Sections Padding & Typography */
.section {
padding: 50px 5% !important;
}
.section-heading h2,
.projects h2,
.why h2,
.loan h2,
.benefits h2,
.plot-copy h2 {
font-size: 30px !important;
}
/* Grids Stack */
.project-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.trust-bar {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
padding: 24px 5% !important;
}
.plot-info {
grid-template-columns: 1fr !important;
gap: 30px !important;
padding: 50px 5% !important;
}
.amenities-inner {
grid-template-columns: 1fr !important;
gap: 30px !important;
}
.amenity-grid-large {
grid-template-columns: repeat(3, 1fr) !important;
}
.location-road-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* CTA Section */
.cta {
grid-template-columns: 1fr !important;
padding: 35px 5% !important;
text-align: center;
}
.family-photo {
display: none !important;
}
}
@media (max-width: 768px) {
/* Direction Compass Layout Fixes for Tablet/Mobile */
.directions {
padding: 40px 3% !important;
}
.direction-compass {
min-height: 820px !important;
border-radius: 20px !important;
}
.direction-compass > .direction-card {
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: 90% !important;
margin: 15px auto !important;
display: block !important;
}
.direction-compass .compass-center {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
margin: 30px auto !important;
width: 110px !important;
height: 110px !important;
}
.direction-compass .compass-axis-logo {
width: 70px !important;
height: 70px !important;
}
.direction-compass > .compass-arrow {
display: none !important; /* Hide floating compass arrows on mobile to avoid overlap */
}
/* Stat & Benefit Grid */
.stat-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.benefit-grid {
grid-template-columns: 1fr !important;
}
/* Footer */
.footer-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
/* Floating Contacts */
.floating-contact {
display: none !important;
}
#mobileEnquiry {
display: block !important;
}
}
@media (max-width: 576px) {
/* Font & Text Sizing for Mobile */
body {
font-size: 15px !important;
}
.hero h1 {
font-size: 28px !important;
}
.hero-buttons {
flex-direction: column;
gap: 10px;
}
.pink-btn, .dark-btn {
width: 100%;
justify-content: center;
padding: 12px 20px !important;
}
/* Single Column Grids for Small Devices */
.project-grid,
.trust-bar,
.testimonial-grid,
.footer-grid,
.location-road-grid {
grid-template-columns: 1fr !important;
}
.amenity-grid-large {
grid-template-columns: repeat(2, 1fr) !important;
}
.amenity-grid-large span {
height: 100px !important;
font-size: 30px !important;
}
/* Bank Marquee / Logo Track */
.bank-logo {
width: 150px !important;
height: 80px !important;
}
/* Expert Popup Mobile Optimization */
.axis-expert-modal {
width: 95vw !important;
}
.axis-expert-card {
grid-template-columns: 1fr !important;
max-height: 85vh;
overflow-y: auto;
}
.axis-expert-copy {
padding: 20px 15px !important;
}
.axis-phone-row {
height: 48px !important;
}
.axis-call-button {
height: 48px !important;
font-size: 14px !important;
}
.axis-expert-person {
min-height: 200px !important;
}
.axis-person-image {
width: 230px !important;
}
/* Copyright Alignment */
.copyright {
flex-direction: column;
gap: 8px;
text-align: center;
}
}
/*feedback */
.google-badge-top {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #e2e8f0;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #444;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Star Rating */
.testimonial-grid .stars, .review-modal-card .stars {
color: #ffb400;
font-size: 16px;
padding: 0 24px;
margin-bottom: 6px;
}
/* Limit review text to exactly 3 lines */
.testimonial-grid article > p.review-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px !important;
}
/* Read More Button */
.read-more-btn {
background: none;
border: none;
color: #df298f;
font-size: 13px;
font-weight: 700;
cursor: pointer;
padding: 0 24px;
margin-bottom: 18px;
display: inline-block;
text-decoration: underline;
transition: color 0.2s;
}
.read-more-btn:hover {
color: #a20873;
}
/* Default User Icon Fallback Styling */
.person img {
background: #fbf1f7;
}
/* --- Review Pop-up Modal --- */
.review-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 14, 37, 0.75);
backdrop-filter: blur(5px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.review-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.review-modal-card {
background: #fff;
border-radius: 18px;
width: min(520px, 100%);
padding: 28px;
position: relative;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.review-modal-overlay.active .review-modal-card {
transform: translateY(0);
}
.modal-close-btn {
position: absolute;
top: 15px;
right: 18px;
background: #f3f3f7;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 20px;
color: #555;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
}
.modal-close-btn:hover {
background: #df298f;
color: #fff;
}
.review-modal-card .quote-mark {
padding: 0 0 10px 0;
}
.review-modal-card .stars {
padding: 0 0 12px 0;
}
.review-modal-card p#modalReviewText {
font-size: 15px;
line-height: 1.8;
color: #444;
margin-bottom: 20px;
}
.review-modal-card .person {
padding: 0;
}/* =========================================================
NEW BUTTONS & TEAM MEMBER SECTION (MODERN ATTRACTIVE)
========================================================= */
/* Actions Row for YT & PPT */
.project-card-actions-row {
display: flex;
gap: 12px;
margin-top: 14px;
margin-bottom: 16px;
}
.proj-action-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.btn-svg-icon {
width: 20px;
height: 20px;
fill: currentColor;
flex-shrink: 0;
}
/* YouTube Button (Theme Matched Soft Red/Pink) */
.proj-yt-btn {
background: rgba(231, 23, 141, 0.08);
color: #d6137c;
border-color: rgba(231, 23, 141, 0.2);
}
.proj-yt-btn:hover {
background: #e7178d;
color: #ffffff;
border-color: #e7178d;
box-shadow: 0 4px 14px rgba(231, 23, 141, 0.3);
transform: translateY(-2px);
}
/* PPT/Images Button (Theme Matched Purple/Blue) */
.proj-ppt-btn {
background: rgba(44, 29, 71, 0.06);
color: #2c1d47;
border-color: rgba(44, 29, 71, 0.18);
}
.proj-ppt-btn:hover {
background: #2c1d47;
color: #ffffff;
border-color: #2c1d47;
box-shadow: 0 4px 14px rgba(44, 29, 71, 0.25);
transform: translateY(-2px);
}
/* Team Member Box */
.project-member-info {
background: #f8f6fc;
border: 1px solid #ebdcf0;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.member-heading {
font-size: 14px;
font-weight: 700;
color: #e7178d;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.member-details-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.member-name {
font-size: 12px;
font-weight: 700;
color: #2c1d47;
display: inline-flex;
align-items: center;
gap: 4px;
}
.member-phone {
font-size: 15px;
font-weight: 700;
color: #16a34a;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.member-phone:hover {
color: #15803d;
text-decoration: underline;
}
/* Name & Phone Icons Enlarged Size */
.project-member-info .member-icon {
width: 16px !important;
height: 16px !important;
}
/* Popup Modal Base */
.project-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.project-modal.show {
opacity: 1;
visibility: visible;
}
.project-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(18, 12, 33, 0.85);
backdrop-filter: blur(6px);
}
.project-modal-content {
position: relative;
z-index: 1;
width: min(850px, 92vw);
background: #1e1233;
border: 1px solid rgba(231, 23, 141, 0.3);
border-radius: 16px;
padding: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
color: #ffffff;
}
.project-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.project-modal-header h3 {
font-size: 17px;
font-weight: 700;
color: #ffffff;
margin: 0;
}
.project-modal-close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.project-modal-close:hover {
background: #e7178d;
}
/* Containers */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 10px;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
.ppt-container {
position: relative;
width: 100%;
max-height: 70vh;
border-radius: 10px;
overflow: hidden;
background: #0d0817;
}
/* Presentation Images Gallery Grid */
.plot-images-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
padding: 10px;
max-height: 65vh;
overflow-y: auto;
}
.plot-img-card {
width: 100%;
height: 180px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.plot-img-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.plot-img-card img:hover {
transform: scale(1.05);
}
.video-controls-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
}
.video-nav-btn {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 6px 14px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
}
.video-nav-btn:hover {
background: #e7178d;
border-color: #e7178d;
}
/* 1. Global Box-Sizing Fix (Sabse important) */
*, *::before, *::after {
box-sizing: border-box;
}
body {
overflow-x: hidden; /* Canvas se bahar content jane se rokega */
}
/* 2. Responsive Grid for Cards Container */
.team-grid,
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.card {
width: 100%; /* Absolute width (like width: 350px) mat rakho */
max-width: 100%;
}
.card img {
width: 100%;
height: auto;
object-fit: cover;
}
/* 3. Small Tablets / iPad Air (1024px and below) */
@media screen and (max-width: 1024px) {
.team-grid {
grid-template-columns: repeat(2, 1fr); /* Force 2 columns */
}
}
/* 4. Mobile Devices & Small Screens (768px and below) */
@media screen and (max-width: 768px) {
.team-grid {
grid-template-columns: 1fr; /* Force single column on mobile */
}
/* Header Navigation Menu Fix */
.nav-menu {
display: none; /* Ya hamburger toggle menu logic */
}
/* Footer & Overlapping Text Fix */
.footer-content,
.footer-section {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
text-align: left;
}
/* Text Overlapping Solution */
.footer-logo-title,
h1, h2, h3, p {
position: static !important; /* Fixed/Absolute positioning ki wajah se overlap hota hai */
line-height: 1.5;
margin-bottom: 10px;
}
}
/* ===== TEAM ROWS (item 9) ===== */
.axis-team-row{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin-bottom:28px}
.axis-team-row .axis-team-card{width:calc(25% - 21px);max-width:280px;min-width:230px;min-height:0;padding:20px}
.axis-team-row:first-of-type .axis-team-card{max-width:300px}
.axis-team-image-wrap{margin-left:auto;margin-right:auto}
@media(max-width:800px){
.axis-team-row{gap:14px;margin-bottom:14px}
.axis-team-row .axis-team-card{width:calc(50% - 7px);min-width:0;padding:14px}
.axis-team-image-wrap{width:100%!important;height:auto!important;aspect-ratio:1/1}
.axis-team-name{font-size:14px!important}
.axis-team-role{font-size:10px!important;padding:4px 8px!important}
.axis-team-call-btn{font-size:11px!important;padding:8px 10px!important}
}
@media(max-width:380px){.axis-team-row .axis-team-card{width:100%}}
/* ===== ITEM 1: MOBILE RESPONSIVE FIXES ===== */
html, body { overflow-x: hidden; max-width: 100%; }
img, iframe, video, svg { max-width: 100%; }
@media (max-width: 800px) {
.header-top-inner { flex-direction: column; gap: 4px; text-align: center; font-size: 12px; }
.header-contact { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.location-network { grid-template-columns: 1fr !important; min-height: auto !important; }
.stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.stat-grid div { padding: 16px 10px !important; }
.stat-grid b { font-size: 28px !important; }
.testimonial-grid { grid-template-columns: 1fr !important; }
.review-action-container { flex-direction: column; text-align: center; }
.footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
.hero-buttons { flex-direction: column; gap: 10px; }
.hero-buttons a { width: 100%; text-align: center; }
}
/* ===== ITEM 2+3: GOOGLE MAP ===== */
.axis-gmap-wrap { position: relative; min-height: 560px !important; background: #eef3ee; }
.axis-gmap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.axis-gmap-legend {
position: absolute; left: 14px; bottom: 14px; z-index: 5;
background: rgba(255,255,255,.95); padding: 8px 12px; border-radius: 10px;
font-size: 12px; font-weight: 600; color: #15142f;
box-shadow: 0 4px 14px rgba(0,0,0,.18); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.axis-gmap-legend .lg-line { width: 28px; height: 5px; background: #FFD400; border: 1px solid #D9A900; border-radius: 3px; display: inline-block; }
.axis-gmap-legend .lg-pin { color: #d62828; font-size: 15px; margin-left: 6px; }
.axis-map-chips { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 6; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.axis-map-chips::-webkit-scrollbar { display: none; }
.axis-map-chips button { flex: 0 0 auto; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: #fff; color: #15142f; font: 600 12px 'Poppins', sans-serif; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.axis-map-chips button.active { background: #e83a9e; color: #fff; }
.axis-map-card { position: absolute; left: 14px; bottom: 62px; z-index: 6; width: 270px; background: #fff; border-radius: 14px; overflow: hidden; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.axis-map-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.axis-map-card > div { padding: 10px 14px 12px; }
.axis-map-card h4 { margin: 0 0 2px; font-size: 16px; color: #15142f; }
.axis-map-card p { margin: 0 0 6px; font-size: 12px; color: #555; }
.axis-map-card a { font-size: 12px; font-weight: 600; color: #e83a9e; text-decoration: none; }
@media (max-width: 800px) {
.axis-gmap-wrap { min-height: 420px !important; }
.axis-map-chips { right: 92px; }
.axis-map-card { width: 200px; bottom: 56px; }
.axis-map-card img { height: 90px; }
}
/* ===== ITEM 4: COMPASS ===== */
.map-compass-real { position: absolute; right: 14px; bottom: 14px; z-index: 6; width: 96px; height: 96px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.map-compass-real svg { width: 100%; height: 100%; }
@media (max-width: 800px) { .map-compass-real { width: 72px; height: 72px; top: 14px; bottom: auto; } }
/* ===== MORE REVIEWS BUTTON ===== */
.more-reviews-wrap { text-align: center; margin-top: 30px; }
.more-reviews-btn { display: inline-block; padding: 14px 28px; border-radius: 999px; background: #e83a9e; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 8px 20px rgba(232,58,158,.3); transition: transform .2s; }
.more-reviews-btn:hover { transform: translateY(-2px); }
@media (max-width: 480px) { .more-reviews-btn { padding: 12px 18px; font-size: 14px; } }
/* ===== FOOTER MAP ===== */
.footer-map { width: 100%; height: 160px; border: 0; border-radius: 12px; margin-top: 10px; }
/* ===== LANGUAGE TRANSLATOR ===== */
.axis-translate { display: inline-block; vertical-align: middle; }
.axis-translate .goog-te-gadget { font-size: 0 !important; }
.axis-translate .goog-te-gadget-simple { background: transparent !important; border: 1px solid rgba(255,255,255,.4) !important; border-radius: 6px; padding: 3px 8px !important; }
.axis-translate .goog-te-gadget-simple span { color: #fff !important; font-size: 12px !important; }
.goog-te-banner-frame.skiptranslate, .goog-logo-link, .goog-te-gadget img { display: none !important; }
body { top: 0 !important; }
/* team cards: width padding ke saath count ho (row mein 4 cards fit hone ke liye) */
.axis-team-row .axis-team-card { box-sizing: border-box; }
.axis-team-row .axis-team-card { width: calc(25% - 22px); }
@media (max-width: 800px) { .axis-team-row .axis-team-card { width: calc(50% - 8px); } }
@media (max-width: 380px) { .axis-team-row .axis-team-card { width: 100%; } }
@media (min-width: 801px) { .axis-team-row .axis-team-card { min-width: 190px; padding: 16px; } }
/* ===== FOOTER LOGO FIX (mobile overlap) ===== */
.footer-logo.logo {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
height: auto !important;
width: auto !important;
gap: 12px !important;
margin-bottom: 16px !important;
position: relative;
}
.footer-logo.logo .logo-image { width: 56px !important; height: 56px !important; flex: 0 0 auto; animation: none; }
.footer-logo.logo .logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.footer-logo.logo .logo-text strong { font-size: 22px !important; }
.footer-logo.logo .logo-text small { font-size: 18px !important; margin-top: 2px; }
/* footer logo: left side par rahe */
.footer-grid > div:first-child { text-align: left !important; }
.footer-logo.logo { justify-content: flex-start !important; margin-left: 0 !important; margin-right: auto !important; }
.footer-grid .socials { justify-content: flex-start !important; }
/* ===== LANGUAGE SWITCHER (header) ===== */
.lang-switch { display: flex; align-items: center; gap: 6px; margin-left: 16px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.08); flex: 0 0 auto; }
.lang-switch .lang-globe { font-size: 15px; line-height: 1; }
.lang-switch select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; outline: 0; color: #fff; font: 600 13px 'Poppins', sans-serif; cursor: pointer; padding-right: 4px; }
.lang-switch select option { color: #15142f; background: #fff; }
@media (max-width: 992px) {
.lang-switch { margin-left: auto; margin-right: 8px; padding: 5px 8px; }
.lang-switch select { font-size: 12px; }
.mobile-menu { margin-left: 0 !important; }
}
/* hide Google's own banner / widget junk */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.skiptranslate, #goog-gt-tt, .goog-te-balloon-frame, .goog-logo-link { display: none !important; }
body { top: 0 !important; position: static !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
/* ===== LANGUAGE DROPDOWN STYLE (header) ===== */
.lang-switch { position: relative; transition: border-color .25s, background .25s, box-shadow .25s; }
.lang-switch:hover,
.lang-switch:focus-within { border-color: #e83a9e; background: rgba(232,58,158,.16); box-shadow: 0 0 0 3px rgba(232,58,158,.18); }
.lang-switch select { color-scheme: dark; padding-right: 16px; letter-spacing: .2px; }
/* small arrow (older browsers) */
.lang-switch::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); pointer-events: none; transition: transform .2s; }
.lang-switch:focus-within::after { transform: rotate(225deg); margin-top: -2px; }
/* options list (works in Chrome / Edge / Firefox desktop) */
.lang-switch select option { background: #17132f; color: #fff; padding: 10px 14px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; }
.lang-switch select option:hover,
.lang-switch select option:focus { background: #e83a9e; color: #fff; }
.lang-switch select option:checked { background: linear-gradient(90deg, #e83a9e, #c2057d); color: #fff; font-weight: 700; }
/* fully styled popup in browsers that support it (latest Chrome / Edge) */
@supports (appearance: base-select) {
.lang-switch::after { display: none; }
.lang-switch select,
.lang-switch select::picker(select) { appearance: base-select; }
.lang-switch select::picker-icon { color: #fff; font-size: 12px; transition: rotate .2s; }
.lang-switch select:open::picker-icon { rotate: 180deg; }
.lang-switch select::picker(select) {
background: #17132f;
border: 1px solid rgba(255,255,255,.18);
border-radius: 14px;
padding: 6px;
margin-top: 10px;
min-width: 150px;
box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.lang-switch select option {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: 9px; cursor: pointer;
transition: background .2s;
}
.lang-switch select option:hover,
.lang-switch select option:focus { background: rgba(232,58,158,.28); }
.lang-switch select option:checked { background: linear-gradient(90deg, #e83a9e, #c2057d); }
.lang-switch select option::checkmark { display: none; }
}
/* =====================================================================
RESPONSIVE POLISH - ALL DEVICES
(phones, foldables, iPad mini/Air/Pro, laptops, desktops, large screens)
Added at the end so nothing above is removed or changed.
===================================================================== */
/* ---------- 1. Base safety for every device ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
img, video, svg, canvas, iframe { max-width: 100%; }
table { max-width: 100%; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
/* notch / rounded-corner safe areas (iPhone landscape, foldables) */
@supports (padding: max(0px)) {
.header-main { padding-left: max(4%, env(safe-area-inset-left)); padding-right: max(4%, env(safe-area-inset-right)); }
footer { padding-left: max(7%, env(safe-area-inset-left)); padding-right: max(7%, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
#backTop { bottom: max(18px, env(safe-area-inset-bottom)); right: max(18px, env(safe-area-inset-right)); }
}
/* ---------- 2. Large screens (full HD, 2K, 4K) ---------- */
@media (min-width: 1700px) {
.section, .plot-info, .amenities, .cta, footer { padding-left: max(7%, calc((100% - 1520px) / 2)); padding-right: max(7%, calc((100% - 1520px) / 2)); }
}
/* ---------- 3. Laptops / iPad Pro landscape / small desktops ---------- */
@media (min-width: 993px) and (max-width: 1180px) {
.section, .plot-info, .amenities { padding-left: 4%; padding-right: 4%; }
.project-grid, .testimonial-grid { gap: 14px; }
}
/* ---------- 4. Tablets (iPad mini, Air, Pro portrait, Android tablets) ---------- */
@media (max-width: 1180px) {
.slider-arrow.left { left: 6px; }
.slider-arrow.right { right: 6px; }
}
@media (min-width: 577px) and (max-width: 992px) {
.project-grid, .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.direction-grid, .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.hero h1, #heroTitle { font-size: clamp(34px, 6vw, 48px); }
.section-heading h2, .projects h2, .why h2, .loan h2, .benefits h2, .plot-copy h2 { font-size: clamp(25px, 4vw, 32px); }
}
/* ---------- 5. Phones: readable minimum text sizes ---------- */
@media (max-width: 768px) {
small { font-size: 11px !important; }
header .logo-text small { font-size: 11px !important; }
.location-mini-label { font-size: 11px !important; }
.axis-team-role { font-size: 11px !important; }
.axis-expert-description { font-size: 12px !important; }
.axis-security { font-size: 11px !important; }
.axis-person-speech-bubble span { font-size: 11px !important; }
.copyright, .copyright span { font-size: 11px !important; }
.copyright { flex-direction: column; gap: 6px; text-align: center; align-items: center; }
.why-badge-orb span { font-size: 10px !important; }
}
/* ---------- 6. Phones: team section in 2 columns (was one very tall column) ---------- */
@media (max-width: 800px) {
.axis-team-row { gap: 14px; }
.axis-team-row .axis-team-card { width: calc(50% - 7px) !important; min-width: 0 !important; min-height: 0 !important; padding: 12px !important; }
}
@media (max-width: 339px) {
.axis-team-row .axis-team-card { width: 100% !important; }
}
/* ---------- 7. Touch devices: comfortable tap targets ---------- */
@media (pointer: coarse) {
.mobile-menu { min-width: 44px; min-height: 44px; }
button, .pink-btn, .dark-btn, .details-btn, .view-all { min-height: 44px; }
nav a { min-height: 44px; display: flex; align-items: center; }
.footer-grid .socials a { width: 40px; height: 40px; }
.footer-grid a { padding: 3px 0; }
.lang-switch select { min-height: 32px; }
}
/* ---------- 8. Popups and overlays must fit short screens (landscape phones) ---------- */
.enquiry-popup, .axis-expert-popup, .review-modal-overlay, .project-modal, .welcome-overlay {
overflow-y: auto;
align-items: safe center;
overscroll-behavior: contain;
}
.enquiry-popup > *, .axis-expert-popup > *, .review-modal-overlay > * {
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
overflow-y: auto;
}
@media (max-height: 520px) {
.welcome-card { padding: 14px 0; }
.welcome-logo-wrap { width: 90px; height: 90px; margin-bottom: 6px; }
.welcome-logo { width: 70px; height: 70px; }
.welcome-card h1 { font-size: 28px; }
.welcome-message { font-size: 14px; }
#skipWelcome { margin-top: 14px; }
.welcome-status { display: none; }
}
/* ---------- 9. Very small phones (iPhone SE 1st gen, Galaxy Fold cover 280-320px) ---------- */
@media (max-width: 360px) {
.header-main { padding-left: 3%; padding-right: 3%; }
.lang-switch { padding: 4px 6px; margin-right: 4px; }
.lang-switch select { font-size: 11px; }
.hero h1, #heroTitle { font-size: 28px; }
.section, .plot-info { padding-left: 14px; padding-right: 14px; }
.welcome-card h1 { font-size: 30px; }
}
/* ---------- 10. Accessibility: respect reduced-motion setting ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* =====================================================================
TEAM SECTION - smart responsive grid
Desktop: leaders on top, then 4 members per row.
Tablet: 3 per row. Phone: 2 per row. Very small phone: 1 per row.
The last (incomplete) row is always centered - no lonely cards.
===================================================================== */
.axis-team-container {
--tcols: 4;
--tgap: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: var(--tgap);
row-gap: 24px;
}
.axis-team-container > .axis-team-header { flex: 0 0 100%; }
/* first row = leaders (kept as its own centered row) */
.axis-team-container > .axis-team-row {
flex: 0 0 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--tgap);
margin-bottom: 0 !important;
}
/* all following rows flow together as one grid */
.axis-team-container > .axis-team-row ~ .axis-team-row { display: contents; }
.axis-team-container .axis-team-card {
box-sizing: border-box;
flex: 0 0 calc((100% - (var(--tcols) - 1) * var(--tgap)) / var(--tcols)) !important;
width: calc((100% - (var(--tcols) - 1) * var(--tgap)) / var(--tcols)) !important;
max-width: none !important;
min-width: 0 !important;
min-height: 0 !important;
}
.axis-team-container .axis-team-image-wrap {
width: 100% !important;
max-width: 250px;
height: auto !important;
aspect-ratio: 1 / 1;
}
.axis-team-container .axis-team-name { overflow-wrap: anywhere; }
@media (max-width: 991px) {
.axis-team-container { --tcols: 3; --tgap: 16px; }
}
@media (max-width: 719px) {
.axis-team-container { --tcols: 2; --tgap: 12px; row-gap: 14px; }
.axis-team-container .axis-team-card { padding: 12px !important; }
.axis-team-container .axis-team-image-wrap { max-width: none; }
}
@media (max-width: 299px) {
.axis-team-container { --tcols: 1; }
}
/* ===== FOOTER LAYOUT: map below address, columns aligned ===== */
.footer-grid { align-items: start; }
.footer-grid h3 { margin-top: 0; }
.footer-grid .footer-map { display: block; width: 100%; height: 170px; margin-top: 14px; border: 0; border-radius: 12px; }
@media (min-width: 993px) {
.footer-grid { grid-template-columns: 1.35fr 0.75fr 1.25fr 1fr !important; gap: 36px !important; }
}
@media (min-width: 577px) and (max-width: 992px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; }
}
@media (max-width: 576px) {
.footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.footer-grid .footer-map { height: 210px; }
}
/* ===== MAP PROJECT CHIPS: clearly visible, highlighted bar over the Google map ===== */
.axis-map-chips {
top: 0 !important; left: 0 !important; right: 0 !important;
align-items: center;
gap: 10px;
min-height: 68px;
padding: 13px 16px !important;
background: linear-gradient(180deg, rgba(21,20,47,.97), rgba(21,20,47,.92));
border-bottom: 3px solid #e83a9e;
box-shadow: 0 10px 28px rgba(15,14,37,.35);
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.axis-map-chips button {
scroll-snap-align: start;
background: rgba(255,255,255,.10);
color: #fff;
border: 1.5px solid rgba(255,255,255,.35);
padding: 9px 16px;
font: 600 13px 'Poppins', sans-serif;
box-shadow: none;
transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.axis-map-chips button:hover,
.axis-map-chips button:focus-visible {
background: rgba(232,58,158,.28);
border-color: #ff63b8;
transform: translateY(-2px);
outline: none;
}
.axis-map-chips button.active {
background: linear-gradient(90deg, #ff3fa4, #c2057d);
border-color: #fff;
color: #fff;
font-weight: 700;
box-shadow: 0 0 0 4px rgba(255,63,164,.28), 0 6px 16px rgba(232,58,158,.55);
}
/* selected-project card: strong pink edge so it stands out on the map */
.axis-map-card { border-left: 5px solid #e83a9e; box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.65); }
@media (max-width: 576px) {
.axis-map-chips { padding: 11px 12px !important; min-height: 62px; }
.axis-map-chips button { padding: 8px 13px; font-size: 12px; }
}
/* keep the map compass clear of the chips bar on phones/tablets */
@media (max-width: 800px) {
.map-compass-real { top: 82px !important; bottom: auto !important; right: 10px; width: 60px; height: 60px; }
}
/* ==========================================
AXIS DIRECTIONS - RESPONSIVE LAYOUT FIX
Maintains compass layout on all devices
========================================== */
#directions .direction-compass {
position: relative !important;
width: 100% !important;
max-width: 1600px !important;
min-height: clamp(520px, 43vw, 700px) !important;
height: auto !important;
margin: 0 auto !important;
overflow: hidden !important;
isolation: isolate;
box-sizing: border-box;
}
#directions .direction-compass .plot-layout-bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
#directions .direction-compass .compass-center {
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
width: clamp(105px, 10vw, 180px) !important;
height: clamp(105px, 10vw, 180px) !important;
}
#directions .direction-compass .compass-axis-logo {
width: 72% !important;
height: 72% !important;
max-width: 125px !important;
object-fit: contain !important;
}
#directions .direction-compass .compass-glow {
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
width: clamp(210px, 28vw, 390px) !important;
height: clamp(210px, 28vw, 390px) !important;
transform: translate(-50%, -50%) !important;
}
#directions .direction-compass > .direction-card {
position: absolute !important;
display: block !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: clamp(6px, 1.2vw, 18px) !important;
opacity: 1 !important;
transform: none !important;
z-index: 8 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-align: center !important;
overflow-wrap: anywhere !important;
box-sizing: border-box;
}
#directions .direction-compass > .direction-north {
left: 50% !important;
top: 3% !important;
right: auto !important;
bottom: auto !important;
width: 27% !important;
transform: translateX(-50%) !important;
}
#directions .direction-compass > .direction-south {
left: 50% !important;
bottom: 3% !important;
right: auto !important;
top: auto !important;
width: 29% !important;
transform: translateX(-50%) !important;
}
#directions .direction-compass > .direction-east {
right: 2% !important;
left: auto !important;
top: 50% !important;
bottom: auto !important;
width: 25% !important;
transform: translateY(-50%) !important;
}
#directions .direction-compass > .direction-west {
left: 2% !important;
right: auto !important;
top: 50% !important;
bottom: auto !important;
width: 25% !important;
transform: translateY(-50%) !important;
}
#directions .direction-compass .direction-card h3 {
font-size: clamp(12px, 1.65vw, 25px) !important;
line-height: 1.25 !important;
margin: 5px 0 !important;
}
#directions .direction-compass .direction-card p {
font-size: clamp(8px, 0.85vw, 13px) !important;
line-height: 1.35 !important;
min-height: 0 !important;
max-width: 100% !important;
margin: 4px auto !important;
}
#directions .direction-compass .direction-card a {
display: inline-block !important;
font-size: clamp(8px, 0.8vw, 12px) !important;
padding: 4px 0 !important;
white-space: normal !important;
}
#directions .direction-compass .dir-icon {
width: clamp(32px, 4.2vw, 68px) !important;
height: clamp(32px, 4.2vw, 68px) !important;
font-size: clamp(16px, 2vw, 30px) !important;
margin: 0 auto 6px !important;
}
#directions .direction-compass > .compass-arrow {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 25 !important;
gap: 4px !important;
}
#directions .direction-compass > .arrow-n {
left: 50% !important;
top: 2% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
flex-direction: column !important;
}
#directions .direction-compass > .arrow-e {
right: 1% !important;
left: auto !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
#directions .direction-compass > .arrow-s {
left: 50% !important;
bottom: 1% !important;
right: auto !important;
top: auto !important;
transform: translateX(-50%) !important;
flex-direction: column !important;
}
#directions .direction-compass > .arrow-w {
left: 1% !important;
right: auto !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
#directions .direction-compass > .compass-arrow b {
width: clamp(25px, 3.4vw, 52px) !important;
height: clamp(25px, 3.4vw, 52px) !important;
font-size: clamp(11px, 1.2vw, 19px) !important;
border-width: 2px !important;
}
#directions .direction-compass > .compass-arrow span {
font-size: clamp(7px, 0.7vw, 11px) !important;
letter-spacing: 0 !important;
}
#directions .direction-compass .compass-line {
display: block !important;
}
#directions .direction-compass::before {
width: clamp(180px, 25vw, 350px) !important;
height: clamp(180px, 25vw, 350px) !important;
}
#directions .direction-compass::after {
width: clamp(240px, 32.5vw, 455px) !important;
height: clamp(240px, 32.5vw, 455px) !important;
}
/* Tablet and mobile */
@media (max-width: 700px) {
#directions.directions {
padding: 35px 3% !important;
}
#directions .section-heading {
margin-bottom: 24px !important;
}
#directions .section-heading h2 {
font-size: clamp(25px, 6vw, 34px) !important;
}
#directions .direction-compass {
min-height: 600px !important;
height: 600px !important;
border-radius: 20px !important;
}
#directions .direction-compass > .direction-north {
top: 5% !important;
width: 38% !important;
}
#directions .direction-compass > .direction-south {
bottom: 5% !important;
width: 40% !important;
}
#directions .direction-compass > .direction-east {
right: 1% !important;
width: 31% !important;
}
#directions .direction-compass > .direction-west {
left: 1% !important;
width: 31% !important;
}
#directions .direction-compass .direction-card h3 {
font-size: clamp(11px, 3vw, 18px) !important;
}
#directions .direction-compass .direction-card p {
font-size: clamp(8px, 2vw, 11px) !important;
}
#directions .direction-compass .direction-card a {
font-size: clamp(7px, 1.8vw, 10px) !important;
}
#directions .direction-compass .dir-icon {
width: clamp(28px, 8vw, 48px) !important;
height: clamp(28px, 8vw, 48px) !important;
font-size: clamp(15px, 4vw, 22px) !important;
}
#directions .direction-compass .compass-center {
width: 105px !important;
height: 105px !important;
}
#directions .direction-compass .compass-glow {
width: 240px !important;
height: 240px !important;
}
#directions .direction-compass > .compass-arrow b {
width: 28px !important;
height: 28px !important;
font-size: 12px !important;
}
#directions .direction-compass > .compass-arrow span {
font-size: 7px !important;
}
}
/* Very small phones */
@media (max-width: 380px) {
#directions .direction-compass {
min-height: 560px !important;
height: 560px !important;
}
#directions .direction-compass > .direction-east,
#directions .direction-compass > .direction-west {
width: 32% !important;
}
#directions .direction-compass > .direction-north,
#directions .direction-compass > .direction-south {
width: 43% !important;
}
#directions .direction-compass .direction-card p {
font-size: 8px !important;
}
}
/* =========================================
LANGUAGE TRANSLATOR - ALIGNMENT FIX
Icon + Language + Dropdown in one line
========================================= */
.language-selector,
.language-switcher,
.language-dropdown,
.goog-te-gadget-simple {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* Translator button */
.language-selector button,
.language-switcher button,
.language-dropdown button {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
/* Globe icon */
.language-selector img,
.language-switcher img,
.language-dropdown img,
.language-selector svg,
.language-switcher svg,
.language-dropdown svg {
display: inline-block !important;
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
vertical-align: middle !important;
position: static !important;
transform: none !important;
}
/* Language text */
.language-selector span,
.language-switcher span,
.language-dropdown span {
display: inline-block !important;
flex: 0 1 auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
vertical-align: middle !important;
}
/* Dropdown arrow */
.language-selector i,
.language-switcher i,
.language-dropdown i {
flex: 0 0 auto !important;
margin: 0 !important;
position: static !important;
transform: none !important;
vertical-align: middle !important;
}
/* Google Translate widget */
.goog-te-gadget-simple a {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
text-decoration: none !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
.goog-te-gadget-simple img {
display: inline-block !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
vertical-align: middle !important;
}
/* Prevent header alignment issues */
header .language-selector,
header .language-switcher,
header .language-dropdown {
align-self: center !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Mobile */
@media (max-width: 700px) {
.language-selector,
.language-switcher,
.language-dropdown,
.goog-te-gadget-simple {
flex-direction: row !important;
align-items: center !important;
white-space: nowrap !important;
}
.language-selector button,
.language-switcher button,
.language-dropdown button {
flex-direction: row !important;
align-items: center !important;
gap: 5px !important;
}
}
/* === Golden Horizon image fix (added 12-10-26) ===
Image already has its own logo + return badge, so hide the pink orb
and show the full image without cropping. Delete this block to undo. */
.why-image-card {
inset: 0 0 auto 20px;
aspect-ratio: 1672 / 940;
background-size: 100% 100%;
}
.why-badge-orb { display: none; }
/* ===== INTRO VIDEO SECTION ===== */
.intro-video-section{background:linear-gradient(120deg,#181334 0%,#241a4a 100%);color:#fff;padding:80px 7%;position:relative;overflow:hidden}
.intro-video-section::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#e83a9e44,transparent 70%);top:-120px;right:-80px;pointer-events:none}
.intro-video-inner{max-width:1150px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:1}
.intro-video-copy h2{font-size:40px;line-height:1.25;margin:8px 0 16px}
.intro-video-copy>p{font-size:16px;line-height:1.9;color:#d7d4e3;max-width:540px}
.intro-video-points{list-style:none;margin:22px 0 6px;padding:0}
.intro-video-points li{font-size:15px;margin:10px 0;color:#eceaf4}
.intro-video-points li::before{content:"✓";color:#e83a9e;font-weight:800;margin-right:10px}
.intro-video-phone{display:flex;justify-content:center}
.intro-video-frame{position:relative;width:100%;max-width:330px;aspect-ratio:9/16;border-radius:34px;border:8px solid #0e0b22;background:#000;overflow:hidden;box-shadow:0 30px 70px #00000080,0 0 0 2px #ffffff22,18px 18px 0 #e83a9e33}
.intro-video-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.intro-play-btn{position:absolute;inset:0;width:100%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;background:linear-gradient(180deg,#10122600 40%,#101226cc 100%);transition:opacity .3s}
.intro-play-btn .play{width:72px;height:72px;font-size:26px;background:#e83a9e;border-color:#fff;padding-left:4px}
.intro-play-btn em{font-style:normal;font-weight:700;font-size:14px;letter-spacing:.5px;text-shadow:0 2px 10px #000a;position:absolute;bottom:26px}
.intro-video-frame.playing .intro-play-btn{opacity:0;pointer-events:none}
@media(max-width:900px){
.intro-video-section{padding:55px 22px}
.intro-video-inner{grid-template-columns:1fr;gap:38px}
.intro-video-copy{text-align:center}
.intro-video-copy>p{margin:auto}
.intro-video-points{display:inline-block;text-align:left}
.intro-video-copy .hero-buttons{justify-content:center;flex-wrap:wrap}
.intro-video-copy h2{font-size:30px}
.intro-video-phone{order:-1}
.intro-video-frame{max-width:280px}
}
/* ---------- Footer social media buttons ---------- */
.footer-grid .socials-title{font-size:12px;font-weight:600;color:#fff;margin:16px 0 4px}
.footer-grid .socials.socials-pro{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.footer-grid .socials.socials-pro a{
width:40px;height:40px;margin:0;padding:0;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
color:#fff!important;transition:transform .25s,background .25s,box-shadow .25s,border-color .25s;
}
.footer-grid .socials.socials-pro a svg{width:20px;height:20px;display:block}
.footer-grid .socials.socials-pro a:hover,.footer-grid .socials.socials-pro a:focus-visible{transform:translateY(-4px);border-color:transparent;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.footer-grid .socials.socials-pro .soc-fb:hover{background:#1877f2}
.footer-grid .socials.socials-pro .soc-ig:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.footer-grid .socials.socials-pro .soc-yt:hover{background:#ff0000}
.footer-grid .socials.socials-pro .soc-in:hover{background:#0a66c2}
.footer-grid .socials.socials-pro .soc-x:hover{background:#000}
.footer-grid .socials.socials-pro .soc-wa:hover{background:#25d366}
@media(max-width:520px){.footer-grid .socials.socials-pro a{width:44px;height:44px}}
/* ===== REAL GPS BUTTON + INFO PANEL (map) ===== */
.axis-gps-btn {
position: absolute; right: 14px; bottom: 124px; z-index: 7;
display: inline-flex; align-items: center; gap: 8px;
border: 0; cursor: pointer; padding: 11px 16px; border-radius: 999px;
background: #fff; color: #15142f; font: 700 13px 'Poppins', sans-serif;
box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 2px rgba(232,58,158,.55);
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.axis-gps-btn svg { color: #e83a9e; flex: 0 0 auto; }
.axis-gps-btn:hover { transform: translateY(-2px); background: #e83a9e; color: #fff; }
.axis-gps-btn:hover svg { color: #fff; }
.axis-gps-btn.busy { opacity: .8; cursor: progress; }
.axis-gps-btn.busy svg { animation: axisGpsSpin 1s linear infinite; }
@keyframes axisGpsSpin { to { transform: rotate(360deg); } }
.axis-gps-info {
position: absolute; right: 14px; bottom: 176px; z-index: 7; width: 290px; max-width: calc(100% - 28px);
background: #fff; color: #15142f; border-radius: 14px; padding: 12px 34px 12px 14px;
font: 500 13px/1.5 'Poppins', sans-serif; border-left: 5px solid #e83a9e;
box-shadow: 0 10px 28px rgba(0,0,0,.32);
}
.axis-gps-info small { color: #666; font-weight: 500; }
.axis-gps-info a { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 12px; color: #e83a9e; text-decoration: none; }
.axis-gps-close { position: absolute; top: 4px; right: 8px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #555; }
@media (max-width: 800px) {
.axis-gps-btn { right: 12px; bottom: 76px; padding: 10px 14px; font-size: 12px; }
.axis-gps-info { right: 12px; bottom: 128px; width: 250px; }
}
/* ===== LEAFLET MAP + LIVE GPS + WORKING COMPASS ===== */
#axisGoogleMap.axis-gmap { z-index: 1; background: #e8efe8; }
.axis-gmap .leaflet-top.leaflet-left { top: 72px; }
.axis-gmap .leaflet-control-attribution { font-size: 10px; }
.axis-pin-wrap, .axis-me-wrap { background: none; border: 0; }
.axis-pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: #e83a9e; transform: rotate(-45deg); display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.axis-pin span { transform: rotate(45deg); color: #fff; font-size: 15px; line-height: 1; }
.axis-me { position: relative; width: 44px; height: 44px; }
.axis-me b { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); animation: axisMePulse 2s infinite; }
.axis-me-cone { position: absolute; left: 50%; top: -12px; margin-left: -14px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 34px solid rgba(26,115,232,.38); display: none; }
.axis-me.has-heading .axis-me-cone { display: block; }
@keyframes axisMePulse { 0% { box-shadow: 0 0 0 0 rgba(26,115,232,.55), 0 2px 6px rgba(0,0,0,.4); } 70% { box-shadow: 0 0 0 16px rgba(26,115,232,0), 0 2px 6px rgba(0,0,0,.4); } 100% { box-shadow: 0 0 0 0 rgba(26,115,232,0), 0 2px 6px rgba(0,0,0,.4); } }
.axis-gps-btn.live svg { color: #1a73e8; }
.map-compass-real { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* ===== Project card: 4 action buttons (2 x 2), Map + Drone ===== */
.project-card-actions-row { flex-wrap: wrap; gap: 10px 12px; }
.project-card-actions-row .proj-action-btn { flex: 1 1 calc(50% - 6px); min-width: 0; }
.proj-map-btn {
background: rgba(22, 163, 74, 0.08);
color: #15803d;
border-color: rgba(22, 163, 74, 0.25);
}
.proj-map-btn:hover {
background: #16a34a; color: #fff; border-color: #16a34a;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3); transform: translateY(-2px);
}
.proj-drone-btn {
background: rgba(26, 115, 232, 0.08);
color: #1a5fc4;
border-color: rgba(26, 115, 232, 0.25);
}
.proj-drone-btn:hover {
background: #1a73e8; color: #fff; border-color: #1a73e8;
box-shadow: 0 4px 14px rgba(26, 115, 232, 0.3); transform: translateY(-2px);
}
/* Drone view modal image */
.drone-container { display: flex; justify-content: center; align-items: center; min-height: 260px; }
.drone-container img { max-width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; display: block; margin: 0 auto; }
/* =====================================================================
WHY SECTION - REDESIGN (left cards) + PHOTO SLIDER (right) [added]
Delete this block to undo.
===================================================================== */
.why-combined-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: stretch; }
.why-features-list { counter-reset: whyc; gap: 18px; }
.why-feature-card {
counter-increment: whyc;
position: relative;
overflow: hidden;
align-items: center;
gap: 20px;
padding: 22px 26px 22px 24px;
border-radius: 20px;
border: 1px solid rgba(231, 23, 141, .12);
background: linear-gradient(120deg, #ffffff 0%, #fdf5fa 100%);
box-shadow: 0 10px 30px rgba(28, 18, 45, .06);
}
.why-feature-card::before { /* gradient accent bar */
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, #e7178d, #6b2fb3);
border-radius: 20px 0 0 20px;
}
.why-feature-card:hover { transform: translateX(8px); border-color: rgba(231, 23, 141, .35); box-shadow: 0 16px 38px rgba(214, 31, 139, .16); }
.why-card-icon {
width: 58px; height: 58px; flex: 0 0 58px;
border-radius: 18px;
font-size: 26px;
background: linear-gradient(145deg, #f0289f, #8a0a66);
box-shadow: 0 10px 22px rgba(231, 23, 141, .32), 0 0 0 6px rgba(231, 23, 141, .09);
transition: .35s ease;
}
.why-feature-card:hover .why-card-icon { transform: rotate(-6deg) scale(1.06); }
.why-feature-card h3 { font-size: 19px; font-weight: 800; padding-right: 44px; }
.why-feature-card p { font-size: 13.5px; }
/* ---- photo slider ---- */
.why-visual-box { min-height: 0; display: flex; align-items: center; }
.why-slider {
position: relative; width: 100%;
aspect-ratio: 4 / 3.3;
border-radius: 26px;
overflow: hidden;
background: #181330;
box-shadow: 14px 14px 0 #f3d2e7, 0 24px 50px rgba(28, 18, 45, .22);
touch-action: pan-y;
user-select: none;
}
.why-slides, .why-slide { position: absolute; inset: 0; margin: 0; }
.why-slide { opacity: 0; transition: opacity .8s ease, transform 6s ease; transform: scale(1.06); }
.why-slide.active { opacity: 1; transform: scale(1); z-index: 1; }
.why-slide img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.why-slider::after { /* soft bottom shade for dots */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 2; pointer-events: none;
background: linear-gradient(to top, rgba(18, 12, 33, .55), transparent);
}
.why-s-btn {
position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255, 255, 255, .92); color: #2c1d47;
font-size: 28px; line-height: 1; display: grid; place-items: center; padding: 0 0 4px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
opacity: 0; transition: .3s ease;
}
.why-s-btn.prev { left: 14px; } .why-s-btn.next { right: 14px; }
.why-slider:hover .why-s-btn, .why-s-btn:focus-visible { opacity: 1; }
.why-s-btn:hover { background: #e7178d; color: #fff; }
.why-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.why-dots button {
width: 9px; height: 9px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
background: rgba(255, 255, 255, .55); transition: .3s ease;
}
.why-dots button.active { width: 28px; background: #e7178d; }
.why-s-count {
position: absolute; top: 14px; right: 14px; z-index: 3;
padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff;
background: rgba(24, 19, 48, .6); backdrop-filter: blur(6px);
}
@media (max-width: 800px) {
.why-combined-grid { grid-template-columns: 1fr; gap: 34px; }
.why-slider { aspect-ratio: 4 / 3; box-shadow: 8px 8px 0 #f3d2e7, 0 18px 36px rgba(28, 18, 45, .2); }
.why-s-btn { opacity: 1; width: 38px; height: 38px; font-size: 24px; }
.why-feature-card { padding: 18px 18px 18px 20px; gap: 14px; }
.why-card-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 22px; }
.why-feature-card h3 { font-size: 16px; }
.why-feature-card::after { font-size: 42px; }
.why-feature-card:hover { transform: none; }
}
/* =====================================================================
MAP SECTION UPGRADE [added] — big map, Axis logo pins, back-to-map
button, compass read-out, GPS share links. Delete this block to undo.
===================================================================== */
@media (min-width: 1001px) {
.location-network { grid-template-columns: minmax(300px, 27%) 1fr !important; min-height: max(820px, 92vh) !important; }
.location-intro { padding: 56px 3vw 56px 4vw !important; }
.solapur-map-art.axis-gmap-wrap { min-height: max(820px, 92vh) !important; }
}
@media (max-width: 1000px) {
.solapur-map-art.axis-gmap-wrap { min-height: 78vh !important; }
}
/* Axis branded pin */
.axis-pin-wrap2 { background: none; border: 0; }
.axis-pin2 {
position: relative; width: 46px; height: 46px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
background: linear-gradient(145deg, #f0289f, #8a0a66); border: 3px solid #fff;
box-shadow: 0 6px 16px rgba(138, 10, 102, .55); display: grid; place-items: center;
transition: transform .2s ease;
}
.axis-pin2 img { width: 34px; height: 34px; border-radius: 50%; transform: rotate(45deg); object-fit: cover; display: block; background: #e60fc0; }
.axis-pin-wrap2:hover .axis-pin2 { transform: rotate(-45deg) scale(1.12); }
.axis-pin2-pulse {
position: absolute; left: 50%; top: 52px; width: 18px; height: 7px; margin-left: -9px; border-radius: 50%;
background: rgba(138, 10, 102, .35); animation: axisPinPulse 2s infinite;
}
@keyframes axisPinPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.leaflet-tooltip.axis-pin-label {
background: #fff; color: #15142f; border: 0; border-radius: 999px; padding: 3px 10px;
font: 700 12px 'Poppins', sans-serif; box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.leaflet-tooltip.axis-pin-label::before { display: none; }
.axis-zoomed-out .leaflet-tooltip.axis-pin-label { display: none; }
.axis-chip-logo { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; object-fit: cover; }
/* project card button on map card + jump highlight */
.axis-card-go { margin: 8px 0 0; display: block; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, #f0289f, #8a0a66); color: #fff; font: 700 12px 'Poppins', sans-serif; }
.project-card-new.axis-card-focus { outline: 4px solid #e83a9e; outline-offset: 4px; box-shadow: 0 0 0 10px rgba(232, 58, 158, .18), 0 18px 40px rgba(232, 58, 158, .3) !important; transition: box-shadow .3s ease; }
.project-card-new:focus { outline: none; }
.project-card-new.axis-card-focus:focus { outline: 4px solid #e83a9e; }
/* floating "back to map" button */
.axis-back-map {
position: fixed; left: 50%; bottom: 22px; z-index: 9999; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
border: 0; cursor: pointer; padding: 13px 22px; border-radius: 999px;
background: linear-gradient(135deg, #f0289f, #8a0a66); color: #fff; font: 700 14px 'Poppins', sans-serif;
box-shadow: 0 10px 28px rgba(138, 10, 102, .5); transition: opacity .3s ease, transform .3s ease; white-space: nowrap;
}
.axis-back-map small { font-weight: 500; opacity: .85; }
.axis-back-map.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* compass: bigger + live direction read-out */
.map-compass-real { width: 112px !important; height: 112px !important; bottom: 40px !important; }
.compass-read {
position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 2; white-space: nowrap;
background: #15142f; color: #fff; font: 700 11px 'Poppins', sans-serif; padding: 3px 10px; border-radius: 999px;
box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.axis-gps-btn { bottom: 176px !important; }
.axis-gps-info { bottom: 228px !important; width: 310px; }
.axis-gps-info a { display: block; }
@media (max-width: 800px) {
.map-compass-real { width: 64px !important; height: 64px !important; top: 82px !important; bottom: auto !important; }
.compass-read { bottom: -16px; font-size: 10px; }
.axis-gps-btn { bottom: 76px !important; }
.axis-gps-info { bottom: 128px !important; width: 250px; }
.axis-back-map { bottom: 14px; font-size: 13px; padding: 11px 16px; }
}
/* ===== GOOGLE MAPS (real view) additions [added] ===== */
.axis-maptype { position: absolute; top: 72px; right: 14px; z-index: 6; display: flex; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.axis-maptype button { border: 0; padding: 9px 16px; background: #fff; color: #15142f; font: 700 12px 'Poppins', sans-serif; cursor: pointer; }
.axis-maptype button.active { background: #15142f; color: #fff; }
.axis-pin-name { position: absolute; top: 60px; left: 23px; transform: translateX(-50%); white-space: nowrap; background: #fff; color: #15142f; border-radius: 999px; padding: 3px 10px; font: 700 12px 'Poppins', sans-serif; box-shadow: 0 3px 10px rgba(0,0,0,.3); pointer-events: none; }
.axis-zoomed-out .axis-pin-name { display: none; }
@media (max-width: 800px) { .axis-maptype { top: 72px; right: auto; left: 12px; } }
/* map card: in-page project location button [added] */
.axis-card-loc { display: block; border: 0; background: none; padding: 0; margin: 0 0 4px; cursor: pointer; font: 700 12px 'Poppins', sans-serif; color: #e83a9e; text-align: left; }
.axis-card-loc:hover { text-decoration: underline; }
.axis-back-map { display: none !important; }
/* Axis pin placed over the key-free Google embed (tip at map centre) [added] */
.axis-embed-pin { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -56px 0 0 -23px; z-index: 5; pointer-events: none; transition: opacity .3s ease; }
.axis-embed-pin.faded { opacity: 0; }
.axis-embed-pin .axis-me-embed { position: absolute; left: 23px; top: 56px; margin: -22px 0 0 -22px; }
/* pin name box fix + all-projects overlay [added] */
.axis-pin-name { width: max-content; max-width: none; box-sizing: border-box; display: block; line-height: 1.3; padding: 4px 12px !important; border: 1px solid rgba(138, 10, 102, .25); background: #fff !important; overflow: visible; }
.axis-embed-all { position: absolute; inset: 0; z-index: 5; pointer-events: none; transition: opacity .3s ease; }
.axis-embed-all.faded { opacity: 0; }
.axis-allpin { position: absolute; width: 46px; height: 46px; pointer-events: auto; cursor: pointer; }
/* yellow highway overlay + legend Axis icon [added] */
.axis-embed-roads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; transition: opacity .3s ease; }
.axis-embed-roads.faded { opacity: 0; }
.axis-gmap-legend .lg-pin { display: inline-flex; margin-left: 8px; }
.axis-gmap-legend .lg-pin img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px #e83a9e, 0 2px 6px rgba(0,0,0,.3); object-fit: cover; }
/* lighter highway colour in legend [added] */
.axis-gmap-legend .lg-line { background: #FFE98A !important; border: 1px solid #E8C65A !important; height: 4px !important; }
/* ---- Map compass: Axis brand look (dark glass dial + pink needle) ---- */
.map-compass-real { filter: drop-shadow(0 6px 14px rgba(21,20,47,.45)); }
.compass-read { background: #15142f; border: 1px solid #e83a9e; letter-spacing: .3px; }
/* ---- Real compass (directions section): same look, live direction ---- */
.direction-compass > .compass-arrow{transition:translate .22s linear,scale .25s ease,filter .25s ease}
.direction-compass > .arrow-n{--dc:rgba(42,157,92,.85);--dt:#168b48}
.direction-compass > .arrow-e{--dc:rgba(232,58,158,.85);--dt:#c51d82}
.direction-compass > .arrow-s{--dc:rgba(47,128,192,.85);--dt:#2872ae}
.direction-compass > .arrow-w{--dc:rgba(240,138,20,.85);--dt:#df7f18}
.direction-compass > .direction-north{--dt:#168b48}
.direction-compass > .direction-east{--dt:#c51d82}
.direction-compass > .direction-south{--dt:#2872ae}
.direction-compass > .direction-west{--dt:#df7f18}
.direction-compass > .compass-arrow.is-facing{scale:1.12;filter:drop-shadow(0 0 12px var(--dc))}
.direction-compass > .direction-card.is-facing h3{color:var(--dt)!important}
.direction-compass > .direction-card.is-facing a{color:var(--dt)!important;font-weight:800!important}
.direction-compass .rc-needle{display:none;position:absolute;left:50%;top:50%;width:var(--rc-d,150px);height:var(--rc-d,150px);margin:calc(var(--rc-d,150px) / -2) 0 0 calc(var(--rc-d,150px) / -2);border-radius:50%;z-index:22;pointer-events:none;rotate:var(--rc-rot,0deg);transition:rotate .22s linear}
.direction-compass.rc-live .rc-needle{display:block}
.direction-compass .rc-needle i{position:absolute;left:50%;top:-4px;width:18px;height:16px;margin-left:-9px;background:#e83a9e;clip-path:polygon(50% 0,0 100%,100% 100%)}
.direction-compass .rc-pill{position:absolute;left:50%;top:calc(50% + var(--rc-d,150px) / 2 + 14px);transform:translateX(-50%);z-index:22;border:0;border-radius:999px;background:#15142f;color:#fff;border:1px solid #e83a9e;padding:7px 18px;font:700 15px/1.2 'Poppins','Noto Sans Devanagari',sans-serif;white-space:nowrap;cursor:pointer;box-shadow:0 8px 20px rgba(21,20,47,.28)}
.direction-compass .rc-pill[hidden]{display:none}
.direction-compass .rc-pill.is-read{cursor:default}
@media (max-width:600px){.direction-compass .rc-pill{font-size:13px;padding:6px 14px}}
@media (prefers-reduced-motion:reduce){.direction-compass > .compass-arrow,.direction-compass .rc-needle{transition:none}}
/* ===== Project Location popup: map is locked so the pin stays on the exact spot ===== */
.video-container.has-axis-pin iframe{pointer-events:none}
/* ===== Focused project card (from map section): don't let the grid clip the highlight glow ===== */
.project-grid:has(.axis-card-focus) { overflow: visible; }
.project-card-new.axis-card-focus { position: relative; z-index: 5; }
/* ===== Clean video player in Videos popup (added) ===== */
.axis-vid-native{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain;display:block}
.axis-yt-host{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000}
.axis-vid-layer{position:absolute;inset:0;z-index:3;cursor:pointer;display:grid;place-items:center;background:#000 center/cover no-repeat;transition:background-color .25s ease}
.axis-vid-layer.is-playing{background-image:none!important;background-color:transparent}
.axis-vid-layer.is-paused{background-image:none!important;background-color:rgba(0,0,0,.55)}
.axis-vid-play{width:78px;height:78px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
background:linear-gradient(145deg,#f0289f,#8a0a66);box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .2s ease,opacity .2s ease}
.axis-vid-play svg{width:38px;height:38px;fill:#fff;margin-left:4px}
.axis-vid-layer:hover .axis-vid-play{transform:scale(1.08)}
.axis-vid-layer.is-playing .axis-vid-play{opacity:0;pointer-events:none}
.axis-vid-layer.is-loading .axis-vid-play{animation:axisVidPulse .9s infinite alternate}
@keyframes axisVidPulse{to{transform:scale(.9);opacity:.7}}
.axis-vid-fallback{background:#e7178d;color:#fff;padding:12px 22px;border-radius:999px;font:700 14px 'Poppins',sans-serif;text-decoration:none}
/* ===== Bank strip: manual Previous / Next buttons (added) ===== */
.bank-nav-wrap{position:relative}
.bank-marquee.bank-js .bank-track{animation:none!important;will-change:transform}
.bank-nav-btn{position:absolute;top:50%;margin-top:-26px;z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid #e6e3ea;
background:#fff;color:#8a0a66;display:grid;place-items:center;cursor:pointer;padding:0;
box-shadow:0 6px 18px rgba(138,10,102,.18);transition:transform .2s ease,background .2s ease,color .2s ease}
.bank-nav-btn svg{width:20px;height:20px;fill:currentColor}
.bank-nav-btn:hover{background:linear-gradient(135deg,#f0289f,#8a0a66);color:#fff;transform:scale(1.08)}
.bank-nav-btn:focus-visible{outline:3px solid #e83a9e;outline-offset:2px}
.bank-prev{left:4px}.bank-next{right:4px}
@media (max-width:600px){.bank-nav-btn{width:34px;height:34px;margin-top:-22px}.bank-nav-btn svg{width:16px;height:16px}.bank-prev{left:0}.bank-next{right:0}}
/* ===== Footer map with Axis pointer (added) ===== */
.footer-map-wrap{position:relative;margin-top:14px;border-radius:12px;overflow:hidden}
.footer-map-wrap .footer-map{display:block;margin-top:0!important;pointer-events:none}
.footer-map-wrap .footer-map-open{position:absolute;inset:0;z-index:6;cursor:pointer}
/* ===== Slider dots: keep them small on touch screens (the 44px button rule made them tall ovals) ===== */
.hero-dots .dot, .why-dots button { min-height: 0; padding: 0; }
.hero-dots .dot { height: 9px; position: relative; }
.hero-dots .dot::after { content: ""; position: absolute; inset: -14px -3px; } /* bigger invisible tap area */
/* ===== Language selector: same compact size on touch and mouse (touch rule made it taller) ===== */
.lang-switch select { min-height: 0; padding-top: 6px; padding-bottom: 6px; margin: -6px 0; } /* extra padding = bigger tap area, no visible size change */
/* ===== CONTACT US SECTION (above footer) ===== */
.contact-us{position:relative;padding:90px 20px;background:linear-gradient(135deg,#15142f 0%,#2a1650 55%,#4a0f4a 100%);color:#fff;overflow:hidden;scroll-margin-top:112px}
.contact-us::before,.contact-us::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.contact-us::before{width:380px;height:380px;right:-120px;top:-120px;background:radial-gradient(circle,#df198955,transparent 70%)}
.contact-us::after{width:320px;height:320px;left:-100px;bottom:-120px;background:radial-gradient(circle,#7b3cff40,transparent 70%)}
.ct-wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.ct-kicker{display:inline-block;padding:6px 16px;border-radius:30px;background:#ffffff1a;border:1px solid #ffffff30;color:#ff8fcf;font-weight:600;font-size:14px;letter-spacing:.3px}
.ct-info h2{font-size:clamp(28px,3.4vw,42px);line-height:1.3;margin:16px 0 14px;font-weight:700}
.ct-info h2 span{color:#ff4fb0}
.ct-lead{color:#e4def5;font-size:16px;max-width:520px}
.ct-points{list-style:none;margin:28px 0;display:grid;gap:16px}
.ct-points li{display:flex;gap:14px;align-items:flex-start;background:#ffffff0f;border:1px solid #ffffff1c;border-radius:16px;padding:14px 16px}
.ct-points li>span{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:linear-gradient(145deg,#ec2ca4,#9d096f);box-shadow:0 8px 18px #df198940}
.ct-points small{display:block;color:#b9b0d6;font-size:12.5px}
.ct-points b{font-weight:600;font-size:15px;line-height:1.5}
.ct-points a:hover{color:#ff8fcf}
.ct-actions{display:flex;flex-wrap:wrap;gap:12px}
.ct-wa,.ct-cb{padding:13px 24px;border-radius:40px;font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s}
.ct-wa{background:#25d366;color:#07311a}
.ct-cb{background:transparent;color:#fff;border:1.5px solid #ff4fb0}
.ct-wa:hover,.ct-cb:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0004}
.ct-card{background:#fff;color:#25243a;border-radius:26px;padding:34px 32px;box-shadow:0 30px 70px #07051c70}
.ct-card h3{font-size:25px;color:#15142f;font-weight:700}
.ct-sub{color:#7a7791;font-size:13px;margin:2px 0 20px}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-full{grid-column:1/-1}
.ct-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ct-field>span{font-size:13.5px;font-weight:600;color:#3a3856}
.ct-field input,.ct-field select,.ct-field textarea{width:100%;font:inherit;font-size:15px;color:#25243a;background:#faf9fd;border:1.5px solid #e6e2f2;border-radius:14px;padding:13px 15px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.ct-field textarea{resize:vertical;min-height:100px}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus,.ct-phone:focus-within{border-color:#df1989;background:#fff;box-shadow:0 0 0 4px #df198920}
.ct-field .invalid,.ct-phone.invalid{border-color:#e5384f!important;background:#fff5f6}
.ct-phone{display:flex;align-items:center;background:#faf9fd;border:1.5px solid #e6e2f2;border-radius:14px;transition:border-color .2s,box-shadow .2s,background .2s}
.ct-phone b{padding:0 4px 0 15px;color:#15142f;font-size:15px}
.ct-phone input{border:0!important;background:transparent!important;box-shadow:none!important;padding-left:10px}
.ct-submit{margin-top:20px;width:100%;display:flex;justify-content:center;align-items:center;gap:12px;border:0;cursor:pointer;font:inherit;font-size:17px;font-weight:700;color:#fff;padding:15px;border-radius:40px;background:linear-gradient(90deg,#ec2ca4,#a30a73);box-shadow:0 14px 28px #df198940;transition:transform .2s,box-shadow .2s}
.ct-submit:hover{transform:translateY(-2px);box-shadow:0 18px 34px #df198955}
.ct-submit:disabled{opacity:.65;cursor:wait;transform:none}
.ct-status{min-height:22px;margin-top:12px;text-align:center;font-size:14px;font-weight:600}
.ct-status.ok{color:#16864a}.ct-status.err{color:#d12a43}
.ct-secure{display:block;text-align:center;color:#7a7791;font-size:12px}
@media(max-width:900px){.ct-wrap{grid-template-columns:1fr;gap:32px}.contact-us{padding:64px 16px}}
@media(max-width:560px){.ct-grid{grid-template-columns:1fr}.ct-card{padding:26px 18px;border-radius:20px}.ct-actions a{flex:1 1 100%;text-align:center}}