.elementor-24960 .elementor-element.elementor-element-62f8669{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-24960 .elementor-element.elementor-element-4e371f6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-24960 .elementor-element.elementor-element-9924b76 .wpr-separator-wrap hr{border-top-style:solid;border-top-color:#605BE5;}.elementor-24960 .elementor-element.elementor-element-9924b76 .wpr-separator-outer-wrap{display:flex;justify-content:center;}.elementor-24960 .elementor-element.elementor-element-9924b76 .line-before hr{border-top-width:1px;transform:translateY(50% - 1px);}.elementor-24960 .elementor-element.elementor-element-9924b76 .line-after hr{border-top-width:1px;transform:translateY(50% - 1px);}.elementor-24960 .elementor-element.elementor-element-9924b76 .wpr-separator-wrap{width:100%;}.elementor-24960 .elementor-element.elementor-element-9924b76 .line-before{margin-right:3px;}.elementor-24960 .elementor-element.elementor-element-9924b76 .line-after{margin-left:3px;}.elementor-24960 .elementor-element.elementor-element-9924b76 .wpr-separator-wrap i{color:#605BE5;font-size:20px;}.elementor-24960 .elementor-element.elementor-element-9924b76 .wpr-separator-wrap svg{fill:#605BE5;width:20px;height:20px;}.elementor-24960 .elementor-element.elementor-element-190d2d3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-5ac5351 *//* ============================================================
YENDRA TECHNO SOLUTION — Residential CCTV (Independent Houses,
Villas, Farms & Farmhouses) Landing Page
Standalone stylesheet (extracted from yendra-cctv-page.html)
Scope: all rules are namespaced under #yd-page.
Font sizes: Large heading (hero) 65px / Section headers 25px / Body text 15px
Scroll-reveal (.reveal, 1.5s) on headers + image cards.
OUR SERVICES: full-bleed video-hero + gapped 4-tile grid (real project photos).
WHY CHOOSE US: .jarallax / .jarallax-img bottom-to-top scroll pan.
NEW: brand-card hover-reveal overlay, decorative radial motif behind
the Specialist band, an accent divider band before Testimonials, and
a floating "Get Quote" pill + back-to-top button that fade in once
the visitor scrolls past the hero (matches reference site behaviour).
Requires in :
============================================================ */
#yd-page{
--navy-950:#0A1120;
--navy-900:#0F1A30;
--navy-800:#16233F;
--navy-700:#1F2E52;
--navy-line:rgba(255,255,255,0.09);
--orange:#EF6337;
--orange-deep:#D8501F;
--white:#FFFFFF;
--off:#F6F7FB;
--ink:#12172A;
--gray:#616A82;
--gray-lt:#A8AFC4;
--radius:14px;
font-family:'Raleway',sans-serif;
font-size:15px;
color:var(--ink);
background:var(--white);
overflow-x:hidden;
width:100%;
-webkit-font-smoothing:antialiased;
}
#yd-page *{ box-sizing:border-box; margin:0; padding:0; }
#yd-page img{ max-width:100%; display:block; }
#yd-page a{ text-decoration:none; color:inherit; }
#yd-page ul{ list-style:none; }
#yd-page p, #yd-page li{ font-size:15px; }
#yd-page section{ width:100%; }
#yd-page .material-symbols-outlined{
font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
line-height:1;
}
#yd-page .wrap{
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 20px;
}
#yd-page h1,#yd-page h2,#yd-page h3,#yd-page h4{
font-family:'Poppins',sans-serif;
font-weight:700;
line-height:1.2;
letter-spacing:-0.01em;
}
#yd-page .eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Raleway',sans-serif;
font-weight:700;
font-size:12.5px;
letter-spacing:0.14em;
color:var(--orange);
}
#yd-page .eyebrow::before{
content:"";
width:7px; height:7px;
border-radius:50%;
background:var(--orange);
flex:none;
}
#yd-page .section{ padding:64px 0; position:relative; }
#yd-page .section-head{ max-width:640px; margin-bottom:36px; }
#yd-page .section-head h2{ font-size:clamp(20px,4.2vw,25px); margin-top:10px; color:inherit; }
/* ---------- scroll-reveal: headings, subject copy & images fade/rise into view ---------- */
#yd-page .reveal{
opacity:0;
transform:translateY(30px);
transition:opacity 1.5s cubic-bezier(.22,.61,.36,1), transform 1.5s cubic-bezier(.22,.61,.36,1);
}
#yd-page .reveal.is-visible{ opacity:1; transform:translateY(0); }
#yd-page .reveal-d1{ transition-delay:.15s; }
#yd-page .reveal-d2{ transition-delay:.3s; }
#yd-page .reveal-d3{ transition-delay:.45s; }
@media(prefers-reduced-motion:reduce){
#yd-page .reveal{ transition:none; opacity:1; transform:none; }
}
#yd-page .btn{
display:inline-flex;
align-items:center;
gap:10px;
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:13.5px;
letter-spacing:0.03em;
padding:15px 28px;
border-radius:999px;
border:none;
cursor:pointer;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
#yd-page .btn-orange{
background:var(--orange);
color:var(--white);
box-shadow:0 10px 24px -8px rgba(239,99,55,0.65);
}
#yd-page .btn-orange:hover{ background:var(--orange-deep); transform:translateY(-2px); }
#yd-page .btn-outline{
background:transparent;
color:var(--white);
border:1.5px solid rgba(255,255,255,0.4);
}
#yd-page .btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); }
/* ---------- horizontal swipe row (mobile) → grid (desktop) ---------- */
#yd-page .swipe-row{
display:flex;
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:8px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
#yd-page .swipe-row::-webkit-scrollbar{ display:none; }
#yd-page .swipe-row > *{ scroll-snap-align:start; flex:0 0 auto; }
/* ======================= HERO ======================= */
#yd-hero{
position:relative;
background:
linear-gradient(180deg, rgba(10,17,32,0.72) 0%, rgba(10,17,32,0.88) 70%, var(--navy-950) 100%),
url('https://yendra.in/wp-content/uploads/2025/08/yendra8-1.jpg') center/cover no-repeat;
color:var(--white);
padding:96px 0 42px;
min-height:520px;
}
#yd-hero .hero-inner{ text-align:center; position:relative; z-index:2; }
#yd-hero .eyebrow{ justify-content:center; color:var(--orange); }
#yd-hero h1{
font-size:clamp(34px,7vw,65px);
color:var(--white);
margin:16px auto 8px;
max-width:820px;
position:relative;
padding:0 30px;
}
#yd-hero h1 .quote{
color:var(--orange);
font-family:'Poppins',sans-serif;
font-weight:800;
}
#yd-hero .hero-cta{ margin:26px 0 46px; }
#yd-hero .hero-feats{
display:flex;
gap:14px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:6px;
scrollbar-width:none;
}
#yd-hero .hero-feats::-webkit-scrollbar{ display:none; }
#yd-hero .feat{
flex:0 0 auto;
scroll-snap-align:start;
width:240px;
display:flex;
gap:12px;
align-items:flex-start;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.12);
border-radius:var(--radius);
padding:16px;
backdrop-filter:blur(6px);
text-align:left;
}
#yd-hero .feat .ic{
flex:none;
width:42px; height:42px;
border-radius:10px;
background:rgba(239,99,55,0.16);
color:var(--orange);
display:flex; align-items:center; justify-content:center;
}
#yd-hero .feat h4{ font-size:14.5px; color:var(--white); margin-bottom:3px; }
#yd-hero .feat p{ font-size:15px; color:var(--gray-lt); line-height:1.4; }
#yd-hero .hero-nav{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin-top:28px;
color:var(--gray-lt);
font-size:13px;
font-weight:600;
}
#yd-hero .hero-nav button{
width:38px; height:38px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.25);
background:transparent;
color:var(--white);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:background .2s ease;
}
#yd-hero .hero-nav button:hover{ background:rgba(255,255,255,0.12); }
@media(min-width:860px){
#yd-hero{ padding:150px 0 60px; }
#yd-hero .hero-feats{ justify-content:center; overflow:visible; }
#yd-hero .feat{ width:260px; }
}
/* ======================= SERVICES (video hero + full-bleed tiles) ======================= */
#yd-services{ background:var(--navy-950); color:var(--white); padding:0; }
#yd-services .svc-video-hero{
position:relative;
min-height:320px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
#yd-services .svc-video-hero video{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
z-index:0;
}
#yd-services .svc-video-hero .video-overlay{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,17,32,0.5) 0%, rgba(10,17,32,0.88) 100%);
z-index:1;
}
#yd-services .svc-hero-inner{
position:relative;
z-index:2;
text-align:center;
padding:88px 20px 54px;
max-width:820px;
}
#yd-services .svc-hero-inner .eyebrow{ justify-content:center; }
#yd-services .svc-hero-inner h2{ color:var(--white); margin-top:14px; }
#yd-services .svc-tile-grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
width:100%;
padding:0 14px 14px;
}
#yd-services .svc-tile{
position:relative;
height:340px;
overflow:hidden;
border-radius:10px;
}
#yd-services .svc-tile img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
transition:transform .6s ease;
}
#yd-services .svc-tile:hover img{ transform:scale(1.07); }
#yd-services .svc-tile .duo{
position:absolute; inset:0;
background:linear-gradient(165deg, rgba(15,23,42,0.08) 8%, rgba(239,99,55,0.5) 55%, rgba(10,17,32,0.95) 100%);
}
#yd-services .svc-tile .tile-cta{
position:absolute; left:20px; bottom:100px; z-index:3;
background:var(--white); color:var(--navy-950);
font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px;
padding:10px 20px; border-radius:999px;
}
#yd-services .svc-tile .label{
position:absolute; left:0; right:0; bottom:0; z-index:2;
background:var(--navy-950);
padding:20px 22px 24px;
display:flex; align-items:center; gap:10px;
clip-path:polygon(0 24px, 100% 0, 100% 100%, 0 100%);
}
#yd-services .svc-tile .label .material-symbols-outlined{ color:var(--orange); font-size:20px; }
#yd-services .svc-tile .label h3{
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:15px;
letter-spacing:0.05em;
text-transform:uppercase;
color:var(--white);
}
@media(min-width:900px){
#yd-services .svc-video-hero{ min-height:400px; }
#yd-services .svc-tile-grid{ grid-template-columns:repeat(4,1fr); gap:20px; padding:0 20px 20px; }
#yd-services .svc-tile{ height:420px; }
}
/* ======================= WHY CHOOSE US ======================= */
#yd-why{ background:var(--off); }
#yd-why .why-grid{
display:grid;
gap:28px;
}
#yd-why .why-panel{
background:var(--navy-900);
color:var(--white);
border-radius:20px;
padding:38px 30px;
position:relative;
overflow:hidden;
}
#yd-why .why-panel::after{
content:"";
position:absolute; inset:0;
background:radial-gradient(circle at 100% 0%, rgba(239,99,55,0.18), transparent 55%);
pointer-events:none;
}
#yd-why .eyebrow{ color:var(--orange); margin-bottom:12px; }
#yd-why .why-panel h2{ color:var(--white); font-size:clamp(20px,4vw,25px); margin-bottom:22px; }
#yd-why .exp-badge{
display:inline-flex;
flex-direction:column;
background:var(--orange);
color:var(--white);
border-radius:12px;
padding:14px 18px;
margin-bottom:22px;
}
#yd-why .exp-badge b{ font-family:'Poppins',sans-serif; font-size:30px; line-height:1; }
#yd-why .exp-badge span{ font-size:12px; font-weight:600; }
#yd-why .why-list{ display:grid; gap:12px; margin-bottom:24px; }
#yd-why .why-list li{
display:flex; align-items:flex-start; gap:10px;
font-size:15px; color:var(--gray-lt);
}
#yd-why .why-list .material-symbols-outlined{ color:var(--orange); font-size:20px; }
#yd-why .why-media.jarallax{
position:relative;
border-radius:20px;
overflow:hidden;
min-height:320px;
}
#yd-why .why-media.jarallax .jarallax-img{
position:absolute;
top:-22%;
left:0;
width:100%;
height:144%;
object-fit:cover;
will-change:transform;
transform:translateY(0);
transition:transform 1.1s cubic-bezier(.16,.84,.44,1);
}
@media(min-width:900px){
#yd-why .why-grid{ grid-template-columns:0.95fr 1.05fr; align-items:stretch; }
#yd-why .why-media.jarallax{ min-height:100%; }
}
/* ======================= ACCREDITATIONS ======================= */
#yd-accred{ background:var(--white); text-align:center; }
#yd-accred .section-head{ margin:0 auto 34px; text-align:center; }
#yd-accred .eyebrow{ justify-content:center; }
#yd-accred .badge-row{ justify-content:flex-start; }
#yd-accred .badge{
width:130px;
text-align:center;
}
#yd-accred .badge .ring{
width:104px; height:104px;
border-radius:50%;
padding:5px;
margin:0 auto 10px;
background:conic-gradient(var(--orange), var(--navy-800));
}
#yd-accred .badge .ring img{
width:100%; height:100%;
border-radius:50%;
object-fit:cover;
border:3px solid var(--white);
}
#yd-accred .badge span{
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:12.5px;
color:var(--ink);
}
@media(min-width:900px){
#yd-accred .badge-row{ display:grid; grid-template-columns:repeat(6,1fr); overflow:visible; justify-items:center; }
}
/* ======================= BRAND CHOICE ======================= */
#yd-brands{ background:var(--off); }
#yd-brands .section-head{ margin:0 auto 34px; text-align:center; max-width:560px; }
#yd-brands .eyebrow{ justify-content:center; }
#yd-brands .brand-card{
width:220px;
background:var(--white);
border:1px solid #E7E9F2;
border-radius:var(--radius);
overflow:hidden;
text-align:center;
padding-bottom:16px;
position:relative;
}
#yd-brands .brand-card .img-wrap{ height:150px; overflow:hidden; }
#yd-brands .brand-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
#yd-brands .brand-card h4{
font-family:'Poppins',sans-serif;
font-size:14.5px;
margin-top:14px;
color:var(--ink);
}
#yd-brands .brand-overlay{
position:absolute; inset:0;
background:var(--navy-950);
color:var(--gray-lt);
padding:20px;
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
transform:translateY(100%);
transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
#yd-brands .brand-card:hover .brand-overlay,
#yd-brands .brand-card:focus-within .brand-overlay,
#yd-brands .brand-card.is-open .brand-overlay{ transform:translateY(0); }
#yd-brands .brand-overlay h5{
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:14.5px;
color:var(--white);
margin-bottom:8px;
}
#yd-brands .brand-overlay p{ font-size:13px; line-height:1.55; margin-bottom:14px; }
#yd-brands .brand-overlay a{
align-self:flex-start;
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:12px;
color:var(--white);
background:var(--orange);
padding:8px 16px;
border-radius:999px;
}
@media(min-width:900px){
#yd-brands .swipe-row{ display:grid; grid-template-columns:repeat(6,1fr); overflow:visible; }
#yd-brands .swipe-row.brand-row-3{ grid-template-columns:repeat(3,1fr); max-width:640px; margin:0 auto; }
#yd-brands .brand-card{ width:auto; }
}
/* ======================= SPECIALIST BAND ======================= */
#yd-specialist{
background:linear-gradient(120deg, var(--navy-950) 0%, var(--navy-900) 100%);
color:var(--white);
overflow:hidden;
}
#yd-specialist .radial-decor{
position:absolute;
top:50%; right:-120px;
width:520px; height:520px;
transform:translateY(-50%);
border-radius:50%;
border:1px solid rgba(239,99,55,0.25);
pointer-events:none;
}
#yd-specialist .radial-decor::before,
#yd-specialist .radial-decor::after{
content:"";
position:absolute;
border-radius:50%;
border:1px solid rgba(239,99,55,0.16);
}
#yd-specialist .radial-decor::before{ inset:70px; }
#yd-specialist .radial-decor::after{ inset:150px; border-color:rgba(255,255,255,0.08); }
#yd-specialist .spec-grid{
display:grid;
gap:32px;
align-items:center;
position:relative;
z-index:1;
}
#yd-specialist .eyebrow{ color:var(--orange); margin-bottom:14px; }
#yd-specialist h2{
font-size:clamp(20px,4vw,25px);
color:var(--white);
margin-bottom:22px;
max-width:520px;
}
#yd-specialist .avatar-card{
display:flex;
align-items:center;
gap:16px;
background:rgba(255,255,255,0.05);
border:1px solid var(--navy-line);
border-radius:16px;
padding:18px;
}
#yd-specialist .avatar{
width:64px; height:64px;
flex:none;
border-radius:50%;
background:linear-gradient(135deg, var(--orange), var(--orange-deep));
display:flex; align-items:center; justify-content:center;
color:var(--white);
}
#yd-specialist .avatar .material-symbols-outlined{ font-size:32px; }
#yd-specialist .avatar-card h4{ font-family:'Poppins',sans-serif; font-size:15px; color:var(--white); }
#yd-specialist .avatar-card span{ font-size:12.5px; color:var(--gray-lt); }
@media(min-width:900px){
#yd-specialist .spec-grid{ grid-template-columns:1.1fr 0.9fr; }
}
/* ======================= TESTIMONIALS (Trustindex widget) ======================= */
#yd-testi{ background:var(--navy-950); color:var(--white); }
#yd-testi .section-head{ margin:0 auto 34px; text-align:center; max-width:560px; }
#yd-testi .eyebrow{ justify-content:center; }
#yd-testi .trustindex-wrap{
width:100%;
min-height:120px;
background:var(--navy-800);
border:1px solid var(--navy-line);
border-radius:var(--radius);
padding:24px;
text-align:center;
color:var(--gray-lt);
font-size:15px;
}
/* ======================= QUICK ACTIONS ======================= */
#yd-quick{ background:var(--orange); }
#yd-quick .q-grid{ display:grid; gap:2px; background:rgba(255,255,255,0.25); border-radius:var(--radius); overflow:hidden; }
#yd-quick .q-item{
background:var(--orange);
padding:26px 24px;
display:flex; align-items:center; gap:14px;
color:var(--white);
}
#yd-quick .q-item .ic{
width:46px; height:46px;
border-radius:10px;
background:rgba(255,255,255,0.18);
display:flex; align-items:center; justify-content:center;
flex:none;
}
#yd-quick .q-item small{ display:block; font-size:11.5px; opacity:0.85; margin-bottom:2px; }
#yd-quick .q-item strong{ font-family:'Poppins',sans-serif; font-size:15px; }
@media(min-width:800px){
#yd-quick .q-grid{ grid-template-columns:repeat(3,1fr); }
}
/* ======================= FAQ ======================= */
#yd-faq{ background:var(--navy-950); color:var(--white); }
#yd-faq .section-head{ margin:0 auto 30px; text-align:center; }
#yd-faq .eyebrow{ justify-content:center; }
#yd-faq .faq-list{ max-width:800px; margin:0 auto; display:grid; gap:12px; }
#yd-faq .faq-item{
background:var(--navy-800);
border:1px solid var(--navy-line);
border-radius:12px;
overflow:hidden;
}
#yd-faq .faq-q{
width:100%;
text-align:left;
background:none;
border:none;
color:var(--white);
font-family:'Poppins',sans-serif;
font-size:14.5px;
padding:18px 20px;
display:flex; align-items:center; justify-content:space-between;
gap:12px;
cursor:pointer;
}
#yd-faq .faq-q .material-symbols-outlined{ color:var(--orange); transition:transform .25s ease; flex:none; }
#yd-faq .faq-item.open .faq-q .material-symbols-outlined{ transform:rotate(45deg); }
#yd-faq .faq-a{
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
}
#yd-faq .faq-a p{ padding:0 20px 18px; font-size:15px; color:var(--gray-lt); line-height:1.7; }
/* ======================= DIVIDER BAND ======================= */
#yd-page .yd-divider{
width:100%;
height:22px;
background:var(--orange);
}
/* ======================= FLOATING CTA + BACK TO TOP ======================= */
#yd-page .yd-floating-quote{
position:fixed;
left:20px; bottom:20px;
z-index:60;
display:flex; align-items:center; gap:8px;
background:var(--orange);
color:var(--white);
padding:13px 22px;
border-radius:999px;
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:13px;
box-shadow:0 10px 24px -8px rgba(239,99,55,0.65);
opacity:0;
transform:translateY(14px);
transition:opacity .3s ease, transform .3s ease, background .2s ease;
pointer-events:none;
}
#yd-page .yd-floating-quote.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
#yd-page .yd-floating-quote:hover{ background:var(--orange-deep); }
#yd-page .yd-back-top{
position:fixed;
right:20px; bottom:20px;
z-index:60;
width:44px; height:44px;
border-radius:10px;
border:none;
background:var(--orange);
color:var(--white);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
opacity:0;
transform:translateY(14px);
transition:opacity .3s ease, transform .3s ease, background .2s ease;
pointer-events:none;
}
#yd-page .yd-back-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
#yd-page .yd-back-top:hover{ background:var(--orange-deep); }
@media(max-width:600px){
#yd-page .yd-floating-quote span.label{ display:none; }
#yd-page .yd-floating-quote{ padding:13px; }
}
#yd-gallery{ background:var(--navy-950); padding-top:0; }
#yd-gallery .g-row{ display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:2px; overflow-x:auto; scrollbar-width:none; }
#yd-gallery .g-row::-webkit-scrollbar{ display:none; }
#yd-gallery .g-item{ position:relative; height:150px; overflow:hidden; }
#yd-gallery .g-item img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.15) brightness(0.75); transition:filter .3s ease; }
#yd-gallery .g-item:hover img{ filter:none; }
#yd-gallery .g-item .material-symbols-outlined{
position:absolute; top:10px; right:10px; color:var(--white); font-size:18px; opacity:0.85;
}
@media(min-width:900px){
#yd-gallery .g-row{ grid-auto-columns:unset; grid-template-columns:repeat(6,1fr); }
}/* End custom CSS */