:root{
    --ink:#0b0b0c;
    --charcoal:#1a1a1d;
    --paper:#ffffff;
    --paper-dim:#f6f5f3;
    --red:#e31b23;
    --graphite:#65646a;
    --hairline:#e7e5e0;
    --mono: "Montserrat", sans-serif;
       --sans: "Montserrat", sans-serif;
    --maxw: 1200px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; overflow-x:hidden}
  body{margin:0; font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%}
  img{max-width:100%; height:auto; display:block}
  a{color:inherit}
  table{max-width:100%}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%}
  section{padding:60px 0}
  @media (max-width:640px){
    .wrap{padding:0 18px}
    section{padding:44px 0}
    h1{font-size:clamp(30px,8vw,40px)}
    h2{font-size:clamp(24px,6vw,30px)}
    .lead{font-size:15px}
  }
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); display:flex; align-items:center; gap:10px; margin-bottom:16px;font-weight: 600;}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--red)}
  h1,h2,h3{font-family:var(--sans); font-weight:800; letter-spacing:-0.02em; margin:0 0 16px}
  h1{font-size:clamp(35px,5vw,50px); line-height:1.05}
  h2{font-size:clamp(28px,3.4vw,35px); line-height:1.1}
  h3{font-size:19px; line-height:1.3}
  p{color:var(--graphite); margin:0 0 16px}
  .lead{font-size:16px; color:#3c3b3f}
  .accent-o{color:var(--red)}
  .btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; letter-spacing:.03em; text-transform:uppercase; padding:14px 24px; border-radius:30px; text-decoration:none; font-weight:600; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease}
  .btn-primary{background:#fff; color:#000;border: 1px solid;}
  .btn-primary:hover{background:var(--red); transform:translateY(-2px);color: #fff}
  .btn-ghost{background:transparent; color:#000; border-color:var(--hairline)}
  .btn-ghost:hover{transform:translateY(-2px);border-color:var(--hairline);background: #fff;color: #000}
  .arrow-circle{width:20px; height:20px; border-radius:50%; background:var(--red); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; flex:none}

  /* top utility bar */
  .topbar{background:var(--ink); color:#c9c8cc; font-family:var(--mono); font-size:12px}
  .topbar .wrap{display:flex; justify-content:flex-end; gap:24px; padding:9px 24px}
  .topbar a{text-decoration:none; color:#c9c8cc}
  .topbar a:hover{color:#fff}

  /* header / mega nav */
  header{position:fixed; top:0; z-index:50; width:100%; background:transparent; border-bottom:1px solid transparent; transition:background .3s ease, box-shadow .3s ease, border-color .3s ease}
  header.scrolled{background:var(--ink); box-shadow:0 2px 18px rgba(0,0,0,.25); border-bottom-color:#232326}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
  main{display:block}
  #top{scroll-margin-top:82px}
  section[id]{scroll-margin-top:82px}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none}
  .brand img{height:auto; width:200px}
  @media (max-width:640px){.brand img{width:140px}}
  .navlinks{display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:14px; font-weight:600}
  .navlinks > li{position:relative}
  .navlinks > li > a{text-decoration:none; padding:8px 0; display:inline-block;color: #fff}
  .navlinks > li > a.active{color:var(--red)}
  .mega{position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--hairline); box-shadow:0 24px 48px -20px rgba(0,0,0,.18); padding:20px; display:none; min-width:640px; grid-template-columns:repeat(3,1fr); gap:24px; border-radius:6px}
  .navlinks > li:hover .mega{display:grid}
  .mega-col .mega-title{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--red); margin:0 0 10px; font-weight:600}
  .mega-col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-weight:500; font-size:13.5px}
  .mega-col a{text-decoration:none}
  .mega-col a:hover{color:var(--red)}
  .nav-right{display:flex; align-items:center; gap:16px}
  .nav-phone{font-family:var(--mono); font-size:13px; text-decoration:none; display:none;color: #fff}
  .navtoggle{display:none; background:none; border:none; font-size:24px; cursor:pointer; color:#fff}
  @media (max-width:960px){
    .navlinks{position:fixed; inset:80px 0 auto 0; background:#fff; flex-direction:column; padding:20px 24px; gap:14px; border-bottom:1px solid var(--hairline); transform:translateY(-130%); transition:transform .25s ease; max-height:80vh; overflow:auto}
    .navlinks.open{transform:translateY(0)}
    .mega{position:static; display:none !important; min-width:0; grid-template-columns:1fr; box-shadow:none; border:none; padding:8px 0 0 12px}
    .navlinks > li.open .mega{display:grid !important}
    .navtoggle{display:block}
  }
  @media (min-width:640px){.nav-phone{display:inline-block}}

  /* ticker */
  .ticker-wrap{background:var(--ink); overflow:hidden; padding:14px 0; border-top:1px solid #222; border-bottom:1px solid #222}
  .ticker{display:flex; white-space:nowrap; animation:scroll 26s linear infinite}
  .ticker span{font-family:var(--mono); font-size:13px; color:#e9e8ec; text-transform:uppercase; letter-spacing:.08em; padding:0 28px; display:flex; align-items:center; gap:10px}
  .ticker span::after{content:"★"; color:var(--red); font-size:10px}
  @keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){.ticker{animation:none}}

  /* hero */
  .hero{padding: 160px 0 140px;background: #000; position:relative; overflow:hidden;background: url("../img/hero-banner01.webp") center center / cover no-repeat;text-align: center;}
  @media (max-width:640px){.hero{padding:130px 0 70px}}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45); /* 0.45 = overlay opacity */
    z-index:-1;
}
  .hero-inner{max-width:820px;margin: 0 auto;text-align: center;}
    .hero h1{color: #fff}
    .hero .eyebrow{color: #fff;display: inline-flex;}
    .hero .btn-ghost{color:#fff;}
   .hero .btn-ghost:hover{color: #000;}
   .hero .cta-row{display: block;}
  .hero-slides{position:relative; min-height:140px}
  .slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease}
  /* Only the first hero slide is a real <h1> (one H1 per page for SEO). Slides 2 & 3 reuse
     the same visual style via this class so the rotation still looks identical. */
  .hero-slides .slide-heading{font-family:var(--sans); font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; font-size:clamp(35px,5vw,50px); line-height:1.05; color:#fff}
  @media (max-width:640px){.hero-slides{min-height:100px} .hero-slides .slide-heading{font-size:clamp(30px,8vw,40px)}}
  .slide.active{position:relative; opacity:1}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
  .trust-strip{display:flex; gap:32px; flex-wrap:wrap; margin-top:44px; padding:28px 0; border-top:1px solid var(--hairline)}
  .trust-strip div{font-family:var(--mono); font-size:12px; color:#fff}
  .trust-strip strong{display:block; font-family:var(--sans); font-size:26px; color:#ffa70d; font-weight:800}

  /* mantra / 3 step */
  .mantra-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:30px}
  @media (max-width:820px){.mantra-grid{grid-template-columns:1fr}}
  .mantra-item{border-top:2px solid var(--ink); padding-top:20px}
  .mantra-num{font-family:var(--sans); font-size:38px; font-weight:800; color:var(--hairline); display:block; margin-bottom:6px; -webkit-text-stroke:1px var(--ink); color:transparent}

  /* services numbered two-column (bestow signature block) */
  .service-lists{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:30px}
  @media (max-width:820px){.service-lists{grid-template-columns:1fr!important}}
  .service-lists h3{font-family:var(--mono); font-size:18px; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:18px;background: var(--ink);padding: 5px 15px; font-weight:600;}
  .num-list{list-style:none; margin:0; padding:0; display:grid; gap:0}
  .num-list li{display:flex; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--hairline); font-weight:700; font-size:16px}
  .num-list li span{font-family:var(--mono); color:var(--red); font-size:13px; font-weight:600}

  /* bracket-frame service cards (logo motif) */
  .bracket-card{position:relative; padding:30px 26px; background:#fff; border:1px solid var(--hairline)}
  .bracket-card::before,.bracket-card::after{content:""; position:absolute; width:16px; height:16px; border:2px solid var(--red)}
  .bracket-card::before{top:-2px; left:-2px; border-right:none; border-bottom:none}
  .bracket-card::after{bottom:-2px; right:-2px; border-left:none; border-top:none}
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:30px}
  @media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:620px){.services-grid{grid-template-columns:1fr}}
  .bracket-card .idx{font-family:var(--mono); font-size:12px; color:var(--red); margin-bottom:14px; display:block}
  .bracket-card a.card-link{font-family:var(--mono); font-size:12px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-top:6px;padding: 5px 10px;border: 1px solid #000;border-radius: 50px;}

  .section-head{max-width:660px}
  .split-cta{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}

  /* why us pill grid */
  .pill-grid{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
  .pill{font-family:var(--mono); font-size:13px; padding:10px 18px; border:1px solid var(--hairline); border-radius:30px; background:#fff}
  .pill .arrow-circle{margin-right:8px; width:16px; height:16px; font-size:9px}

  /* work / portfolio */
  .work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px}
  @media (max-width:960px){.work-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.work-grid{grid-template-columns:1fr}}
  .work-card{border:1px solid var(--hairline); overflow:hidden; background:#fff}
  .work-thumb{height:150px; background:linear-gradient(135deg,var(--ink),#333); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
  .work-body{padding:18px}
  .work-body .tag{font-family:var(--mono); font-size:11px; color:var(--red); text-transform:uppercase; letter-spacing:.06em;font-weight: 600;}
  .work-body h3{margin:8px 0 0; font-size:16px}

  /* gujarat coverage */
  .city-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
  .city-chip{font-family:var(--mono); font-size:13px; padding:8px 16px; border:1px solid var(--hairline); border-radius:20px; background:#fff}

  /* stats band */
  .stats-band{background:var(--paper-dim); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
  @media (max-width:700px){.stats-grid{grid-template-columns:repeat(2,1fr); gap:36px}}
  .stat-num{font-size:42px; font-weight:800; letter-spacing:-.02em}
  .stat-lbl{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite); margin-top:6px}

  /* pricing */
  .price-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:30px}
  @media (max-width:800px){.price-grid{grid-template-columns:1fr}}
  .price-grid-3{grid-template-columns:repeat(3,1fr)}
  @media (max-width:960px){.price-grid-3{grid-template-columns:1fr 1fr}}
  @media (max-width:800px){.price-grid-3{grid-template-columns:1fr}}
  .price-card{border:1px solid var(--hairline); background:#fff; padding:34px}
  .price-card.highlight{border-color:var(--ink); position:relative}
  .price-card.highlight .flag{position:absolute; top:-13px; right:26px; background:var(--red); color:#fff; font-family:var(--mono); font-size:11px; padding:5px 12px; text-transform:uppercase; letter-spacing:.08em; border-radius:20px}
  .price-amt{font-size:36px; font-weight:800; margin:14px 0 4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .price-amt span{font-family:var(--mono); font-size:11px; color:var(--graphite); font-weight:600; text-transform:uppercase; letter-spacing:.06em}
  .bracket-card .service-icon{width:36px; height:36px; color:var(--red); margin-bottom:16px; display:block; stroke-width:1.6}
  .price-card .price-icon{width:34px; height:34px; color:var(--red); margin-bottom:14px; display:block; stroke-width:1.6}
  .info-row .info-icon{width:18px; height:18px; color:#fff; flex:none; margin-top:1px}
  .info-row{align-items:flex-start}
  .info-row .k{display:flex; align-items:center; gap:8px}
  .social-row a svg{width:17px; height:17px}
  .price-list{list-style:none; padding:0; margin:22px 0; display:grid; gap:10px; font-size:14px; color:var(--ink)}
  .price-list li{padding-left:26px; position:relative}
  .price-list li::before{content:none}
  .price-list li .chk{position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--red); display:inline-block}
  .price-list li .chk::after{content:""; position:absolute; left:5px; top:4.5px; width:8px; height:4.5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg)}

  /* testimonials */
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:30px}
  @media (max-width:900px){.testi-grid{grid-template-columns:1fr}}
  .testi-card{background:#fff; border:1px solid var(--hairline); padding:28px}
  .testi-card p{color:var(--ink); font-size:15px}
  .testi-name{font-weight:700; font-size:14px; margin-top:12px}
  .testi-role{font-family:var(--mono); font-size:12px; color:var(--graphite)}

  /* FAQ */
  .faq{max-width:820px}
  details{border-bottom:1px solid var(--hairline); padding:20px 0}
  summary{cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:16px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; color:var(--red); font-size:22px; font-weight:400}
  details[open] summary::after{content:"–"}
  details p{margin-top:14px}

  /* contact */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
  .field{margin-bottom:16px}
  .field label{display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; color:var(--graphite)}
  .field input, .field textarea, .field select{width:100%; padding:13px 14px; border:1px solid var(--hairline); background:#fff; font-family:var(--sans); font-size:14px; border-radius:6px}
  .field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--red); outline-offset:1px}
  .contact-info-card{background:var(--ink); color:#fff; padding:34px; border-radius:8px}
  .contact-info-card a{color:#fff; text-decoration:none}
  .info-row{display:flex; gap:14px; margin-bottom:20px; font-size:14px; align-items:flex-start}
  .info-row .k{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:#8f8f93; letter-spacing:.08em; width:92px; flex:none; padding-top:2px}

  /* blog teaser */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
  @media (max-width:820px){.blog-grid{grid-template-columns:1fr}}
  .blog-card{border:1px solid var(--hairline); padding:22px; background:#fff}
  .blog-card .tag{font-family:var(--mono); font-size:11px; color:var(--red); text-transform:uppercase; letter-spacing:.06em}
  .blog-card h3{font-size:16px; margin:10px 0 0}

  footer{background:#000; color:#b9b8bc; padding:70px 0 0}
  .office-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-bottom:44px; border-bottom:1px solid #232326}
  @media (max-width:900px){.office-grid{grid-template-columns:repeat(2,1fr)}}
  .office-grid h3{color:#fff; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; font-weight:600}
  .office-grid p{font-size:13.5px; color:#9a999e}
  .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:44px 0; border-bottom:1px solid #232326}
  @media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
  footer h4.col-title{color:#fff; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px}
  footer ul{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:14px}
  footer a{text-decoration:none}
  footer a:hover{color:#fff}
  .foot-bottom{display:flex; justify-content:space-between; padding:24px 0; font-size:13px; flex-wrap:wrap; gap:10px}
  .foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
  .social-row{display:flex; gap:14px; margin-top:18px}
  .social-row a{width:34px; height:34px; border:1px solid #232326; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px}
  .social-row a:hover{border-color:var(--red); color:var(--red)}

  /* WhatsApp live-chat widget */
  /* Single direct-link WhatsApp button — no popup, no JS toggle */
  .whatsapp-fab{position:fixed; bottom:22px; right:22px; z-index:60; width:60px; height:60px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.28); text-decoration:none; border:none; cursor:pointer; flex:none}
  .whatsapp-fab img, .whatsapp-fab svg{width:30px; height:30px; position:relative; z-index:2}
  .whatsapp-fab .wa-ping{position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.55; animation:waPing 2.2s cubic-bezier(0,0,.2,1) infinite}
  @keyframes waPing{0%{transform:scale(1); opacity:.55} 70%{transform:scale(1.9); opacity:0} 100%{transform:scale(1.9); opacity:0}}
  .whatsapp-fab .wa-dot{position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:#22c35e; border:2px solid #fff; z-index:3}
  @media (max-width:480px){.whatsapp-fab{bottom:16px; right:16px}}

  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none !important}}

  /* extra small-screen refinements */
  @media (max-width:480px){
    .office-grid{grid-template-columns:1fr 1fr; gap:20px 16px}
    .foot-grid{grid-template-columns:1fr}
    .contact-info-card{padding:24px}
    .price-card{padding:24px 20px}
    .bracket-card{padding:24px 18px}
    .page-hero{padding:120px 0 44px}
    .stats-grid{grid-template-columns:repeat(2,1fr); gap:24px}
    .stat-num{font-size:32px}
    .foot-bottom{flex-direction:column; text-align:center}
    .split-cta{align-items:flex-start}
    .work-thumb{height:130px}
    .testi-card, .price-card{width:100%}
  }

  /* interior page hero (non-homepage) */
  .page-hero{padding:150px 0 60px; background:var(--ink); text-align:center}
  .page-hero .eyebrow{justify-content:center; color:#fff}
  .page-hero h1{color:#fff; margin-bottom:12px}
  .page-hero p{color:#c9c8cc; max-width:640px; margin:0 auto}
  .breadcrumb{font-family:var(--mono); font-size:12px; color:#9a999e; margin-top:16px}
  .breadcrumb a{color:#c9c8cc; text-decoration:none}
  .breadcrumb a:hover{color:#fff}

  /* blog article */
  .article-body{max-width:760px; margin:0 auto}
  .article-body h2{margin-top:36px}
  .article-body ul,.article-body ol{color:var(--graphite); padding-left:20px}
  .article-meta{font-family:var(--mono); font-size:12px; color:var(--graphite); text-transform:uppercase; letter-spacing:.06em; margin-bottom:24px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
  .blog-card{transition:transform .15s ease, box-shadow .15s ease}
  .blog-card a{text-decoration:none}
  .blog-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(0,0,0,.25)}
  .blog-card p{font-size:14px; margin-top:10px}

  /* scroll-reveal animation (SEO-safe: content is always in the HTML, only CSS opacity/transform is toggled) */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease}
  .reveal.in-view{opacity:1; transform:translateY(0)}
  .hero-inner{animation:heroIn .8s ease both}
  @keyframes heroIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1 !important; transform:none !important; transition:none !important} .hero-inner{animation:none}}

  /* work / testimonial sliders */
  .slider-wrap{position:relative}
  .slider-wrap .work-grid, .slider-wrap .testi-grid{display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:20px; margin-top:44px; padding-bottom:6px}
  .slider-wrap .work-grid::-webkit-scrollbar, .slider-wrap .testi-grid::-webkit-scrollbar{display:none}
  .slider-wrap .work-card{flex:0 0 260px}
  .slider-wrap .testi-card{flex:0 0 320px}
  .slider-wrap .work-card, .slider-wrap .testi-card{scroll-snap-align:start}
  .slider-nav{display:flex; gap:10px; justify-content:center; margin-top:18px}
  .slider-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--hairline); background:#fff; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease, transform .15s ease}
  .slider-btn:hover{background:var(--red); color:#fff; border-color:var(--ink); transform:translateY(-2px)}
  @media (max-width:700px){.slider-wrap .work-card{flex:0 0 220px}}
  @media (max-width:480px){
    .slider-wrap .work-card{flex:0 0 78vw}
    .slider-wrap .testi-card{flex:0 0 84vw}
    .slider-nav{justify-content:center}
  }

  #about{
    padding:60px 0;
}

.about-grid{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.about-content{
    flex:1;
}

.about-content h2,
.about-content .lead,
.about-content p{
    max-width:700px;
}

.about-image{
    flex:1;
    text-align:right;
}

.about-image video{max-width:100%; height:auto; display:inline-block; border-radius:10px}


/* Responsive */
@media (max-width:991px){

    .about-grid{
        flex-direction:column;
        gap:40px;
    }

    .about-content,
    .about-image{
        width:100%;
    }

    .about-image{
        text-align:center;
    }

    .about-image img{
        margin:auto;
    }
}
.sec_heading .sec_heading_line {
    position: relative;
}

.sec_heading .sec_heading_line::before {
    position: absolute;
    inset: 0;
    content: "";
    height: 15px !important;
    top: auto;
    bottom: -1rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 1rem;
    width: 70%;
    background-image: url(../img/single_border_bottom_dark.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 0;
}
@media(max-width: 786px){
  .sec_heading .sec_heading_line::before {
        height: 18px !important;
  }
  .nav{
            background: #000;
    padding: 15px;
  }
  .nav-right{
    gap: 5px;
  }
  .btn-primary{
        gap: 3px;
            padding: 10px 15px;
  }
}
#about{
    position: relative;
    overflow: hidden;
    background: #fff;
}
#work{
   position: relative;
    overflow: hidden;
    background: #fff;
}
#testimonal-sec{
   position: relative;
    overflow: hidden;
    background: #fff;
}

/* Background Text */
.sec_bg_txt{
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 800;
    line-height: 1;
    color: rgba(0,0,0,0.05);   /* Light Grey */
    text-transform: capitalize;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    letter-spacing: -5px;
}

/* Content should stay above */
.wrap,
.about-grid{
    position: relative;
    z-index: 2;
}
.sec_bg_txt{
    position: absolute;
    top: 10px;
    left: 25%;
    font-size: clamp(140px, 22vw, 250px);
    font-weight: 900;
    color: rgba(0,0,0,.05);
    line-height: .9;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
}
@media (max-width:768px){

    .sec_bg_txt{
        font-size:70px;
        left:50%;
        transform:translateX(-50%);
        top:20px;
        letter-spacing:-2px;
    }

    #about{
        padding:70px 0;
    }
    .how-box{
      border: 1px solid #ddd!important;
    }
    .navlinks > li > a{
      color: #000;
    }
    .navlinks{
      gap: 0;
    }
}