/* ============================================================
   Wealth Edge Digital Marketing — Home Page Stylesheet
   Merged from Hubfolio demos:
   - Navbar ......... creative_agency2 (home6)
   - Hero ........... modern_startup  (home12)
   - Statement ...... startup_agency  (home1)
   - About .......... modern_startup  (home12)
   - Services ....... digital_agency  (home9)
   - Marquee ........ modern_agency   (home5)
   - Showcase ....... creative-studio (home8)
   - Blog ........... modern_agency2  (home10)
   - Contact ........ startup_agency  (home1)
   - Footer ......... modern_agency   (home5)
   ============================================================ */

:root {
  --bg-color: #212121;
  --theme-color: #151515;
  --main-color: #2bbd83;
  --main-gradient: linear-gradient(135deg, #82db6e, #2bbd83); }

/* Extend the template's .fit-img (img-only) crop utility to cover <video> too */
.fit-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; }

/* Reusable brand-gradient text accent */
.text-gradient {
  color: var(--main-color);
  background: var(--main-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; }

/* Small inline icon (checklist items, etc.) — unlike .icon this has no
   ancestor-scoped width rule elsewhere, so it needs its own. */
.icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex: none; }
  .icon-sm img {
    width: 16px; }

/* ---------------------------------------------
   Base (dark theme)
   --------------------------------------------- */
body {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #fff;
  background-color: var(--theme-color); }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0; }

h1 {
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -3px; }

h2 {
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -3px; }

h3 {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -2px; }

h4 {
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -2px; }

h5 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -1px; }

h6 {
  font-size: 24px;
  line-height: 32px; }

.sub-color {
  color: #8e8e8e; }

/* Section kicker label — was a thin 20px line with a plain bullet dot
   prefix, easy to miss next to the big heading it introduces. Made it
   read as a proper eyebrow label instead: bold, brand-colored, spaced
   out, no dot. Used site-wide (about/services/contact/every service page). */
.sub-head {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 1px; }

/* inner_pages.css defines .sec-head .sub-head (with the bullet dot) TWICE —
   once near the top of the file and again further down — so removing our
   own copy of the rule wasn't enough; the vendor's second copy kept
   cascading through since nothing was left to override it. Kill the dot
   explicitly instead of just omitting it. */
.sec-head .sub-head {
  padding-left: 0; }
  .sec-head .sub-head:after {
    content: none; }

p {
  font-size: 16px;
  font-weight: 400;
  margin: 0; }

.sec-head {
  text-wrap: pretty; }

.title-font {
  font-family: "Six Caps", sans-serif;
  letter-spacing: normal; }

.italic {
  font-style: italic;
  display: inline; }

.loader-wrap svg {
  fill: #1d1d1d; }

.butn.butn-bord {
  border: 1px solid rgba(255, 255, 255, 0.3); }
  .butn.butn-bord:hover {
    background: #fff;
    color: #212121; }

.butn.butn-bg {
  border: 1px solid var(--main-color);
  background: var(--main-gradient);
  color: #151515; }
  .butn.butn-bg:hover {
    background: transparent;
    color: inherit; }

.icon.invert img {
  -webkit-filter: invert(1);
  filter: invert(1); }

.butn .icon {
  width: 18px; }

.butn:hover .icon.invert img {
  -webkit-filter: invert(0);
  filter: invert(0); }

/* ---------------------------------------------
   Menu — creative_agency2 (home6)
   --------------------------------------------- */
.navbar {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  background: transparent;
  z-index: 9999999; }
  .navbar .container {
    background: #fff;
    color: #1d1d1d;
    border-radius: 0 0 15px 15px;
    -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px; }
  .navbar.nav-scroll {
    padding: 0;
    position: fixed;
    top: -80px;
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    -o-transition: transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transform: translateY(80px);
    -ms-transform: translateY(80px);
    transform: translateY(80px); }
  .navbar .logo {
    padding: 0;
    border: 0;
    border-radius: 0; }
    .navbar .logo img {
      height: 46px;
      width: auto; }
  .navbar .topnav .menu-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #1d1d1d;
    border-radius: 50%;
    color: #fff; }
  .navbar .topnav .butn {
    padding: 8px 20px;
    background: var(--main-gradient);
    color: #1d1d1d;
    margin-right: 15px; }

/* ---------------------------------------------
   Hero — modern_startup (home12) .header-mst
   --------------------------------------------- */
.header-mst {
  padding: 200px 0;
  position: relative;
  overflow: hidden; }
  .header-mst .header-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0; }
  .header-mst .caption h1 {
    font-size: 128px;
    line-height: 1.0; }
  .header-mst .butons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .header-mst .butons .bg,
    .header-mst .butons .bord {
      width: 140px;
      height: 140px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      border-radius: 50%; }
    .header-mst .butons .bg {
      background: var(--main-gradient);
      color: #151515;
      position: relative;
      z-index: 3; }
    .header-mst .butons .bord {
      border: 1px solid #fff;
      padding: 20px;
      margin-left: -30px; }
  .header-mst .cont .arrow {
    width: 45px;
    height: 45px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background: #fff; }
    .header-mst .cont .arrow svg {
      width: 15px; }
  .header-mst .cont span {
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 8px 25px;
    border-radius: 30px;
    font-size: 16px;
    margin-left: 10px; }
  .header-mst .cont p {
    color: #eee; }

/* ---------------------------------------------
   Statement — startup_agency (home1) .services-sa
   --------------------------------------------- */
.services-sa .item {
  background: var(--bg-color);
  padding: 15px;
  border-radius: 20px; }
  .services-sa .item .cont {
    padding: 15px; }
    .services-sa .item .cont .icon {
      width: 52px;
      height: 52px;
      line-height: 50px;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%; }
      .services-sa .item .cont .icon img {
        width: 25px; }
      .services-sa .item .cont .icon.invert img {
        -webkit-filter: invert(1);
        filter: invert(1); }
    .services-sa .item .cont .text {
      margin-top: 100px;
      margin-bottom: 20px; }
      .services-sa .item .cont .text p {
        font-size: 14px;
        font-weight: 300;
        line-height: 22px; }

/* ---------------------------------------------
   About — modern_startup (home12) .hero-mst  (light section)
   --------------------------------------------- */
.hero-mst {
  background: #D4DEE7;
  color: #0D0D0D;
  border-radius: 50px 50px 0 0;
  margin-top: -60px;
  position: relative;
  z-index: 5; }
  .hero-mst p {
    color: #494949;
    font-weight: 300; }
  .hero-mst h1, .hero-mst h2, .hero-mst h3, .hero-mst h4, .hero-mst h5, .hero-mst h6 {
    font-weight: 500;
    letter-spacing: normal; }
  .hero-mst .img {
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
    max-width: 550px;
    margin: auto; }
  .hero-mst .exp {
    position: absolute;
    top: 30%;
    left: 15px;
    z-index: 2;
    max-width: 200px; }
    .hero-mst .exp span {
      font-size: 13px;
      text-transform: uppercase;
      line-height: 1.3; }
    .hero-mst .exp h2 {
      font-size: 34px;
      line-height: 1.2;
      letter-spacing: -1px; }
  .hero-mst .curve {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    z-index: -1; }
  .hero-mst .butn.bg-light {
    background: #fff;
    color: #0D0D0D; }

/* ---------------------------------------------
   Services — digital_agency (home9) .services-accord
   --------------------------------------------- */
.services-accord {
  background: #121212; }
  .services-accord .accordion .accordion-item {
    background: transparent;
    border-radius: 0;
    border: 0; }
    .services-accord .accordion .accordion-item:last-of-type .accordion-title {
      border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .services-accord .accordion .accordion-item:last-of-type .accordion-body {
      border-top: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
  .services-accord .accordion .accordion-title {
    color: #8e8e8e;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer; }
    .services-accord .accordion .accordion-title h2 {
      font-size: 90px;
      font-weight: 500;
      line-height: 1.4; }
    .services-accord .accordion .accordion-title .icon svg {
      width: 40px;
      height: 40px; }
    .services-accord .accordion .accordion-title:not(.collapsed) {
      color: #fff; }
      .services-accord .accordion .accordion-title:not(.collapsed) .icon svg path {
        stroke: url(#wedmGradient); }
  .services-accord .accordion .accordion-body {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05); }
    .services-accord .accordion .accordion-body p {
      color: #8e8e8e; }
    .services-accord .accordion .accordion-body .list {
      margin-top: 20px; }
      .services-accord .accordion .accordion-body .list span {
        display: block;
        font-size: 14px;
        text-transform: uppercase;
        margin-top: 15px; }

/* ---------------------------------------------
   Marquee — modern_agency (home5) .marq-mp
   --------------------------------------------- */
.marq-mp .main-marq {
  overflow: hidden;
  padding: 25px 0; }

.marq-mp .color-bg {
  background: var(--main-gradient);
  -webkit-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
  position: relative;
  z-index: 4; }
  .marq-mp .color-bg .item h5 {
    color: #151515; }
  .marq-mp .color-bg .item:after {
    background: #151515; }

.marq-mp .gray-bg {
  background: var(--bg-color);
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
  /* The template's -30px assumed both bands were flat. With .color-bg tilted
     +2deg and this one -4deg, their rotated bounding boxes actually overlap
     by ~67px at -30px, making the text unreadable where the bands cross. */
  margin-top: 80px; }

.marq-mp .item {
  padding: 0 60px !important;
  position: relative; }
  .marq-mp .item:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  .marq-mp .item h5 {
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap; }

/* ---------------------------------------------
   Showcase — creative-studio (home8) .work-card
   --------------------------------------------- */
.work-card .card-item {
  margin-bottom: 30px; }
  .work-card .card-item .img {
    position: relative;
    height: 650px;
    border-radius: 15px;
    overflow: hidden; }
    .work-card .card-item .img:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-color)), to(transparent));
      background-image: -webkit-linear-gradient(top, var(--theme-color), transparent);
      background-image: -o-linear-gradient(top, var(--theme-color), transparent);
      background-image: linear-gradient(to bottom, var(--theme-color), transparent);
      opacity: .6; }
    .work-card .card-item .img .tags {
      position: absolute;
      top: 30px;
      right: 30px;
      z-index: 3; }
      .work-card .card-item .img .tags a {
        font-size: 12px;
        line-height: 1;
        padding: 7px 12px;
        margin-right: 2px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 30px; }
  .work-card .card-item h5 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 140px;
    font-family: "Six Caps", sans-serif;
    line-height: 1;
    letter-spacing: normal;
    z-index: 3; }
    .work-card .card-item h5.bottom {
      top: auto;
      bottom: 30px; }
    .work-card .card-item h5.left {
      text-align: left;
      padding-left: 30px; }
    .work-card .card-item h5.right {
      text-align: right;
      padding-right: 30px; }

.container-xxl {
  max-width: 1500px !important; }

/* ---------------------------------------------
   Blog — modern_agency2 (home10) .blog-mp  (light section)
   --------------------------------------------- */
.sec-head-lg h2 {
  font-size: 90px;
  line-height: 1.1;
  letter-spacing: -.02rem; }

.blog-mp {
  background-color: #eee;
  color: #1d1d1d;
  padding-top: 200px;
  margin-top: -60px; }
  .blog-mp .sub-color {
    color: #666; }
  .blog-mp p {
    color: #666; }
  .blog-mp .butn.butn-bord {
    border-color: #333;
    color: #1d1d1d; }
    .blog-mp .butn.butn-bord:hover {
      background: #1d1d1d;
      color: #fff; }
  .blog-mp .bord {
    position: relative; }
    .blog-mp .bord:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      border-left: 1px solid rgba(0, 0, 0, 0.1); }
  .blog-mp .item .info .author-img {
    width: 40px;
    height: 40px;
    border-radius: 50%; }
  .blog-mp .item .info .author-info,
  .blog-mp .item .info .date {
    font-size: 13px;
    text-transform: uppercase; }
    .blog-mp .item .info .author-info span,
    .blog-mp .item .info .date span {
      display: block;
      line-height: 22px; }
  .blog-mp .item .info .author-info .sub-color {
    text-transform: capitalize !important; }
  .blog-mp .item .img {
    border-radius: 15px;
    height: 255px;
    overflow: hidden; }

/* ---------------------------------------------
   Contact — startup_agency (home1) .contact-sa
   --------------------------------------------- */
.contact-sa .box {
  padding: 120px 60px;
  background-color: #0A0B0E;
  background-image: radial-gradient(75% 90% at 100% 100%, rgba(127, 232, 90, 0.28), rgba(10, 11, 14, 0) 65%),
                    radial-gradient(50% 60% at 0% 0%, rgba(127, 232, 90, 0.07), rgba(10, 11, 14, 0) 60%);
  background-size: cover;
  background-position: center center;
  border-radius: 30px;
  overflow: hidden; }

.contact-sa .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%; }

.contact-sa .contact-form label {
  font-size: 14px;
  margin-bottom: 5px; }
  .contact-sa .contact-form label .star {
    color: red;
    padding-left: 5px; }

.contact-sa .contact-form input,
.contact-sa .contact-form textarea {
  color: #fff;
  background: transparent;
  width: 100%;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 18px; }

.contact-sa .contact-form button {
  background: transparent;
  color: #fff; }

/* ---------------------------------------------
   Footer — modern_agency (home5) .footer-ds
   --------------------------------------------- */
.footer-ds {
  border-color: rgba(255, 255, 255, 0.3); }
  .footer-ds .subscribe .form-group {
    margin: 60px 0 15px;
    position: relative; }
    .footer-ds .subscribe .form-group label {
      font-size: 14px;
      margin-bottom: 10px; }
    .footer-ds .subscribe .form-group input {
      padding: 20px 50px 20px 20px;
      background: var(--bg-color);
      border: 0;
      border-radius: 5px;
      width: 100%;
      color: #fff; }
    .footer-ds .subscribe .form-group button {
      background: transparent;
      border: 0;
      position: absolute;
      bottom: 20px;
      right: 15px;
      width: 25px; }
  .footer-ds .subscribe span {
    color: #808080;
    font-size: 13px; }
    .footer-ds .subscribe span a {
      color: #fff;
      text-decoration: underline; }
  .footer-ds .contact-info .item h6 {
    margin-bottom: 15px; }
  .footer-ds .contact-info .item p {
    font-size: 14px;
    margin-top: 5px; }
  .footer-ds .sub-footer .copy .logo {
    width: 46px; }
  .footer-ds .sub-footer .copy p {
    font-size: 14px; }
    .footer-ds .sub-footer .copy p a {
      color: #fff; }
  .footer-ds .sub-footer .links {
    width: 100%; }
    .footer-ds .sub-footer .links a {
      font-size: 14px; }
    .footer-ds .sub-footer .links .active {
      color: #fff; }

/* ---------------------------------------------
   Logo sizing — real lockup is a wide 2-line mark
   (icon + "WEALTH EDGE" + "DIGITAL MARKETING FZE LLC"),
   so every placement needs an explicit height with
   width left to flow from the intrinsic aspect ratio.
   --------------------------------------------- */
.hamenu .cont-info .logo {
  width: auto; }
  .hamenu .cont-info .logo img {
    height: 40px;
    width: auto; }

.footer-sa .logo {
  width: auto; }
  .footer-sa .logo img {
    height: 42px;
    width: auto; }

/* ---------------------------------------------
   About page — "Why Wealth Edge" pillar rows need
   more breathing room than the template default
   (20px was too tight for the 100px-tall row text).
   --------------------------------------------- */
.services-dm .item {
  padding: 45px 0; }

/* The template's default 100px title read oversized for these rows and,
   combined with align-items-center on the row, made a wrapped 2-line
   title visually collide with the hover-revealed description — the
   description sits vertically centered on the row too, so it landed in
   the gap between the title's two lines instead of clearly below or
   beside them. Shrinking the title reduces how often it wraps at all;
   line-height still needs setting explicitly since the template only
   ever set it relative to the 100px size. */
.services-dm .item .title h2 {
  font-size: 50px;
  line-height: 1.15; }

/* .text is pushed right via margin-left:auto, which only claims leftover
   space — it doesn't guarantee a gap from .title, so a title wide/long
   enough to wrap (or just a wide word) can butt right up against the
   description with no breathing room. padding-right on .title reserves
   that gap unconditionally, regardless of how the title wraps. */
.services-dm .item .title {
  padding-right: 40px; }

/* Service page "Stats" row (e.g. "<2s Avg. load time") — the template's
   100px number read oversized next to its label/sublabel text. */
.intro-cst .states .item h2 {
  font-size: 50px; }

/* Careers application form — the template's .contact-pg input/textarea
   styling (transparent, underline-only) never covered <select> or
   type="file", which we need for "Position applying for" and "Resume/CV".
   Left unstyled they render as solid white browser-default boxes that
   clash with the rest of the dark form. */
.contact-pg select,
.contact-pg input[type="file"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  padding: 15px 0;
  font-size: 16px; }
.contact-pg select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
.contact-pg select option {
  color: #212121; }
.contact-pg label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #8e8e8e;
  margin-bottom: 8px; }

/* ---------------------------------------------
   Start a Project — dedicated brief/intake page
   --------------------------------------------- */

/* Thin scroll-progress bar, fixed outside the smooth-scroll wrapper
   (same proven pattern as .progress-wrap so it stays viewport-fixed). */
.brief-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 999999999; }
  .brief-progress .brief-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--main-gradient); }

.brief-hero-h1 {
  font-size: 90px;
  line-height: 1.15;
  letter-spacing: -2px; }

/* Banner video on the Start a Project header — contained, not
   full-width, so it sits as an accent beneath the headline rather
   than replacing the page's own dark background. The spacing below
   it lives on the wrapping .container as padding-bottom (not as
   margin-bottom on the video) so it can't collapse through the
   parent and get eaten by the marquee that follows. */
.brief-hero-video-wrap {
  padding-bottom: 70px; }

.brief-hero-video {
  max-width: 1296px;
  width: 100%;
  height: 420px;
  margin: 60px auto 0;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 90px rgba(43, 189, 131, 0.18); }
  .brief-hero-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; }

/* Cycling word in the hero heading */
.cycle-wrap {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  vertical-align: bottom; }

.cycle-list {
  display: flex;
  flex-direction: column;
  animation: cycleWords 10s ease-in-out infinite; }
  .cycle-list span {
    display: block;
    height: 1.15em;
    line-height: 1.15;
    color: var(--main-color);
    background: var(--main-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; }

@keyframes cycleWords {
  0%, 15% { transform: translateY(0); }
  20%, 35% { transform: translateY(-1.15em); }
  40%, 55% { transform: translateY(-2.3em); }
  60%, 75% { transform: translateY(-3.45em); }
  80%, 95% { transform: translateY(-4.6em); }
  100% { transform: translateY(0); } }

/* Brief question blocks */
.brief-block label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .6;
  margin-bottom: 10px; }

.brief-q {
  position: sticky;
  top: 120px; }
  .brief-q .brief-numb {
    display: block;
    font-size: 16px;
    color: var(--main-color);
    background: var(--main-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    margin-bottom: 15px; }
  .brief-q h3 {
    font-size: 40px;
    line-height: 1.2; }

/* Chip-style checkbox / radio selectors — CSS-only, no JS required */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px; }

.chip-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px; }

.chip-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  cursor: pointer;
  font-size: 15px;
  color: #fff;
  transition: all .3s;
  -webkit-user-select: none;
  user-select: none; }
  .chip-label .chip-icon {
    width: 18px;
    -webkit-filter: invert(1);
    filter: invert(1);
    transition: all .3s; }
  .chip-label:hover {
    border-color: rgba(255, 255, 255, 0.6); }

.chip-input:checked + .chip-label {
  background: var(--main-gradient);
  border-color: var(--main-color);
  color: #151515;
  font-weight: 600; }
  .chip-input:checked + .chip-label .chip-icon {
    filter: invert(0); }

.chip-input:focus-visible + .chip-label {
  outline: 2px solid var(--main-color);
  outline-offset: 2px; }

/* ====================== [ Start Responsive ] ====================== */

/* Below the container's xxl breakpoint (1400px) the offset-lg-1 image
   column starts too close to the viewport edge for the "360° Digital
   Partner" badge to fit without colliding with the rotated photo —
   hide it until the container reaches its full max-width. */
@media screen and (max-width: 1399px) {
  .hero-mst .exp {
    display: none; } }

@media screen and (max-width: 992px) {
  .sec-head .sub-head {
    margin-bottom: 30px !important; }
  .services-accord .accordion .accordion-title h2 {
    font-size: 74px; }
  .sec-head-lg h2 {
    font-size: 70px; }
  .brief-hero-video-wrap {
    padding-bottom: 60px; }
  .brief-hero-video {
    max-width: 90%;
    height: 320px;
    border-radius: 40px;
    margin: 50px auto 0; } }

@media screen and (max-width: 768px) {
  .navbar .container {
    padding: 5px 10px; }
  .navbar .logo img {
    height: 34px;
    width: auto; }
  .header-mst .caption h1 {
    font-size: 60px; }
  .sec-head {
    display: block !important; }
    .sec-head .ml-auto {
      margin: 15px 0 0 0 !important; }
  .services-accord .accordion .accordion-title {
    padding: 15px 0; }
    .services-accord .accordion .accordion-title h2 {
      font-size: 45px; }
    .services-accord .accordion .accordion-title .d-flex {
      display: block !important; }
  .work-card .card-item .img {
    height: 500px; }
  .work-card .card-item h5 {
    font-size: 80px; }
  .sec-head-lg h2 {
    font-size: 36px;
    letter-spacing: -1px; }
    .sec-head-lg h2 br {
      display: none; }
  .sec-head-lg .d-flex {
    display: block !important;
    margin-top: 15px; }
  .contact-sa .box {
    padding: 120px 40px; }
  .brief-q {
    position: static;
    margin-bottom: 30px; }
    .brief-q h3 {
      font-size: 30px; }
  .chip-label {
    padding: 12px 20px;
    font-size: 14px; }
  .brief-hero-h1 {
    font-size: 48px; }
  .brief-hero-video-wrap {
    padding-bottom: 50px; }
  .brief-hero-video {
    max-width: 100%;
    height: 220px;
    border-radius: 30px;
    margin: 40px auto 0; } }

/* The template sizes the loader screen's SVG wave at 100vw but left the
   wrapper itself at width:100% — on mobile that resolves against the
   wrapper's containing block, not the true viewport, so on pages where
   anything causes horizontal overflow the loader visibly falls short of
   the right edge of the screen instead of covering it fully. */
.loader-wrap {
  width: 100vw; }

/* Client wants the plain OS pointer everywhere instead of the custom
   follow-cursor dot. The dot is a decorative overlay only — there's no
   cursor:none rule hiding the real pointer underneath it — so hiding it
   is enough. The element itself stays in the DOM rather than being
   removed from the layout: common_scripts.js's cursor-follow handler
   runs on every mousemove and assumes document.querySelector('.cursor')
   exists, so removing the node would throw on every mouse move instead
   of just doing nothing. */
.cursor {
  display: none !important; }

/* Blog details "Recent News" section: on Home/BlogGrid, .blog-mp carries
   .section-padding directly on itself, and .blog-mp's own padding-top:200px
   / margin-top:-60px (net 140px, for the light-section overlap look)
   simply wins the cascade over section-padding's 140px — same number,
   no double-counting. Blog details instead nests a separate
   .container.section-padding *inside* .blog-mp, so both rules apply as
   two independent boxes and their padding stacks — on top of the
   article's own 140px bottom padding, that produced a huge dead gap
   between the comment form and "Recent News". Neutralizing .blog-mp's
   own spacing for this specific nested instance leaves the inner
   container's section-padding as the only top-spacing source, matching
   the Home/BlogGrid gap size without the double count. */
.blog-mp.blog-mp--nested-padding {
  padding-top: 0;
  margin-top: 0; }

@media screen and (max-width: 767px) {
  .blog.section-padding {
    padding-bottom: 60px; }
  .blog-mp .container.section-padding {
    padding-top: 60px; } }