/* ============================================================
   Global header + dropdown overrides — apply to every page.
   ============================================================ */

/* ---------------- Header ---------------- */
/* Slim down the top contact bar */
.top-bar .top-bar-inner {
  padding: 10px 0;
}

.top-bar-item,
.list-support a,
.post-social .icon-social {
  font-size: 13px;
}

/* The nav items had a 90px line-height in the base theme — bring it
   down to a comfortable, modern bar height across every page. */
.menu-primary-menu .item-link {
  line-height: 76px;
  font-size: 16px;
}

.header .main-menu {
  padding-left: 32px;
}

.header .logo-header {
  padding-right: 32px;
}

.header .header-right {
  gap: 14px;
  padding-right: 24px;
}

.header .header-content {
  padding-right: 0;
}

/* Smaller, tighter "Get A Quote" button */
.header .nav-btn .tf-btn {
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
}

/* Sleek elevated header */
.header {
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-sticky.is-fixed,
.header-sticky {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(25, 39, 43, 0.92);
}

/* The megamenu burger sat in a hard white block that clashed with the
   dark header bar. Turn it into a compact icon button on all pages. */
.header .megamenu-btn {
  background-color: transparent;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.header .megamenu-btn:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.header .megamenu-btn .burger {
  align-items: center;
}

.header .megamenu-btn .burger span {
  background-color: var(--white);
  width: 20px !important;
}

@media (min-width: 1501px) {
  .header .logo-header {
    padding-right: 50px;
  }
  .header .main-menu {
    padding-left: 40px;
  }
  .header .header-right {
    gap: 22px;
    padding-right: 40px;
  }
}

/* ---------------- Header dropdowns ---------------- */
/* The default dropdown was a flush white box with hard edges and a
   solid-fill hover state. Give it a dark, floating card treatment
   on every page. */
.sub-menu {
  width: 240px;
  left: 0;
  top: calc(100% + 10px);
  padding: 10px;
  background-color: var(--dark-2);
  border: 1px solid var(--stroke-2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(8px);
}

.menu-primary-menu .menu-item:hover .sub-menu {
  transform: translateY(0);
}

.sub-menu .sub-menu-item {
  border-radius: 8px;
}

.sub-menu .sub-menu-item .item-link-2 {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  padding: 11px 16px;
  border-radius: 8px;
}

.sub-menu .sub-menu-item:hover {
  background-color: rgba(67, 186, 255, 0.12);
}

.sub-menu .sub-menu-item:hover .item-link-2 {
  color: var(--primary);
}

/* ============================================================
   Home page only – scoped to body.home-minimal
   ============================================================ */

/* Tone down the busy decorative ring graphics */
.home-minimal .mask {
  opacity: 0.35;
}

/* Tighter, more balanced type scale */
.home-minimal h2,
.home-minimal .heading-section .title {
  font-size: 38px;
  line-height: 1.25;
  letter-spacing: -0.6px;
}

.home-minimal .heading-section .sub-title {
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Every section used a different mb-30/mb-53/mb-60 utility on its
   heading block, giving each "heading -> content" gap a different
   size. Normalize to one consistent rhythm throughout the page. */
.home-minimal .heading-section {
  margin-bottom: 50px;
}

/* ---------------- Hero ---------------- */
/* Make the intro headline its own full-height, centered "splash" -
   the copy, stats and image (the next row) sit below the fold and
   only appear once the visitor scrolls. The top-page-title row already
   handles its own vertical centering via min-height, so the section
   itself only needs a modest top gap and a normal section-bottom gap. */
.home-minimal .page-title-home {
  padding-top: 40px;
  padding-bottom: 60px;
}

.home-minimal .page-title-home .top-page-title {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding-top: 0;
  margin-bottom: 0;
}

.home-minimal .page-title-home .top-page-title .sub-title {
  font-size: 18px;
  width: 100%;
  max-width: 980px;
}

.home-minimal .page-title-home .top-page-title .title {
  font-size: 60px;
  line-height: 1.15;
  letter-spacing: -1px;
  max-width: 980px;
  width: 100%;
}

/* The highlighted phrase was a flush, sharp-edged rectangle that
   clashed with the page's rounded-corner language - give it a
   small radius and breathing room so it reads as a soft badge */
.home-minimal .page-title-home .top-page-title .title .highlight {
  padding: 2px 8px;
  border-radius: 6px;
}

.home-minimal .page-title-home .content-left {
  padding-top: 0;
}

.home-minimal .page-title-home .desc {
  padding-bottom: 28px;
  margin-bottom: 28px;
}

.home-minimal .page-title-home .desc p {
  font-size: 18px;
  line-height: 1.6;
}

.home-minimal .page-title-home .wg-counter {
  margin-bottom: 32px;
  margin-right: 0;
}

/* Align the hero copy and hero image on the same visual line.
   The theme's default bleeds the image off the right edge of the
   viewport with a large negative margin - contain it instead so it
   sits neatly inside its column. */
.home-minimal .page-title-home .row.justify-content-between {
  align-items: center;
}

.home-minimal .page-title-home .image {
  border-radius: 24px;
  overflow: hidden;
  height: auto;
  width: 100%;
  margin-right: 0 !important;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--stroke-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.home-minimal .page-title-home .image img {
  border-radius: 24px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero stat numbers were oversized compared to the body copy -
   match the size used for the achievements counters below */
.home-minimal .page-title-home .number-counter.fs-65 {
  font-size: 40px;
}

/* ---------------- About section ---------------- */
.home-minimal .section-about .section-content .desc p {
  font-size: 16px;
  line-height: 1.7;
}

/* ---------------- Large feature images ---------------- */
/* The big "text on one side, image on the other" blocks (achievements,
   company, CTA) each treated their image differently. Give them all
   the same framed look so they read as one consistent system. */
.home-minimal .section-counting .image,
.home-minimal .section-company .image-section,
.home-minimal .section-form .image {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--stroke-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.home-minimal .section-counting .image img,
.home-minimal .section-company .image-section img,
.home-minimal .section-form .image img {
  border-radius: 20px;
}

/* The achievements photo used to stretch to the full height of its
   row, making it look far heavier than the heading + counters beside
   it. Give it the same 4:3 proportions as the hero image, cap its
   column width so it visually matches the hero pairing, and center
   it against the text column. */
.section-counting-inner.flex {
  align-items: center;
}

/* Narrow the wide container so the section doesn't dominate the viewport */
.section-counting .container.w-1810 {
  max-width: 1200px;
}

/* Left image column: narrower so text side gets more room */
.section-counting .left {
  flex: 0 0 44%;
  max-width: 44%;
  height: auto;
}

/* Constrain image to a landscape ratio and cap its height */
.section-counting .image {
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 440px;
}

/* Right column: align content centrally */
.section-counting .right {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Heading inside counting section: smaller than global h2 */
.section-counting .heading-section .title {
  font-size: 28px;
  line-height: 1.3;
}

.section-counting .heading-section {
  margin-bottom: 30px;
}

/* Counter number font */
.section-counting .number-counter.fs-65 {
  font-size: 34px;
}

/* Counter boxes: tighter padding and smaller max-width */
.section-counting .counter-item.style-2 {
  padding: 24px 28px 20px;
  max-width: 200px;
}

/* Badge pinned to bottom-left corner of the photo */
.section-counting .image {
  position: relative;
  overflow: hidden;
}
.section-counting .left .box-avatar {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: none;
  padding: 16px 20px 18px;
  max-width: 210px;
  z-index: 2;
}
.section-counting .left .box-avatar .text {
  padding-bottom: 10px;
}
.section-counting .left .box-avatar .text p {
  font-size: 14px !important;
  line-height: 19px;
  margin-bottom: 8px;
}
.section-counting .left .box-avatar .text img {
  max-width: 80px;
}
.section-counting .left .box-avatar .list-agent .agent {
  width: 30px;
  height: 30px;
}
.section-counting .left .box-avatar .list-agent .agent.agent-plus {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

/* The company image stretched to match the full height of the
   accordion text on its left (800px+), making it a visual wall.
   Constrain it to 4:3 like the hero image and pin it to the
   top of the row so it doesn't try to fill the accordion's height. */
.home-minimal .section-company .section-company-inner {
  align-items: flex-start;
}

.home-minimal .section-company .image-section {
  flex: 0 0 44%;
  min-width: 0;
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Smaller inline accordion thumbnails stay on the same 16px radius
   as the other card-style images */
.home-minimal .according-content .image {
  border-radius: 16px;
  overflow: hidden;
}

.home-minimal .according-content .image img {
  border-radius: 16px;
}

/* ---------------- Services cards ---------------- */
.home-minimal .services-item {
  border-radius: 16px;
}

.home-minimal .services-item .image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.home-minimal .services-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-minimal .services-item .icon i {
  font-size: 40px;
}

.home-minimal .services-item .desc {
  font-size: 15px;
  line-height: 1.7;
}

/* ---------------- Team ---------------- */
/* The team heading lives in a narrow col-lg-3 sidebar — at the
   global 38px h2 size it dominated the cards next to it. Scale it
   down so it reads as a quiet label, not a hero headline. */
.home-minimal .section-team .heading-section .title {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin-bottom: 32px;
}

.home-minimal .section-team .heading-section .sub-title {
  font-size: 12px;
  margin-bottom: 10px;
}

.home-minimal .team-item .top-item .image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.home-minimal .team-item .top-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- Case studies ---------------- */
.home-minimal .project-item .image {
  border-radius: 16px;
  overflow: hidden;
}

.home-minimal .project-item .image img {
  border-radius: 16px;
}

.home-minimal .project-item .title-project {
  font-size: 26px;
  line-height: 1.3;
}

/* ---------------- Testimonials ---------------- */
.home-minimal .testimonial-item .text.fs-27 {
  font-size: 22px;
  line-height: 1.6;
}

.home-minimal .list-image .img-section img {
  border-radius: 16px;
}

/* ---------------- CTA banner ---------------- */
.home-minimal .section-form .image img {
  border-radius: 16px;
}

/* ---------------- Blog ---------------- */
.home-minimal .tf-post-list.style-2 .image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.home-minimal .tf-post-list.style-2 .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-minimal .tf-post-list.style-2 .title {
  font-size: 20px;
  line-height: 1.4;
}

.home-minimal .tf-post-list.style-2 .desc {
  font-size: 15px;
  line-height: 1.6;
}

/* ---------------- Swiper cards sizing & content reduction ---------------- */
.home-minimal .tf-swiper .swiper-slide .services-item,
.home-minimal .tf-swiper .swiper-slide .team-item,
.home-minimal .tf-swiper .swiper-slide .project-item,
.home-minimal .tf-swiper .swiper-slide .testimonial-item {
  padding: 18px;
}

.home-minimal .tf-swiper .swiper-slide .services-item .title,
.home-minimal .tf-swiper .swiper-slide .team-item .name,
.home-minimal .tf-swiper .swiper-slide .project-item .title {
  font-size: 16px;
}

.home-minimal .tf-swiper .swiper-slide .services-item .desc,
.home-minimal .tf-swiper .swiper-slide .team-item .desc,
.home-minimal .tf-swiper .swiper-slide .project-item .desc {
  font-size: 13px;
}

.home-minimal .tf-swiper .swiper-slide .testimonial-item .text {
  font-size: 14px;
}

.home-minimal .tf-swiper .swiper-slide .image {
  aspect-ratio: 1 / 0.85;
}

/* ---------------- Section rhythm ---------------- */
/* Most sections sit on a 120px (tf-spacing-2) bottom gap, but the
   company and CTA sections used different spacing classes (92px /
   117px), breaking the rhythm between sections. Normalize both. */
.home-minimal .section-company.tf-spacing-3,
.home-minimal .section-form.tf-spacing-4 {
  margin-bottom: 120px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
  .home-minimal .page-title-home .top-page-title {
    min-height: calc(100vh - 130px);
  }

  .home-minimal .page-title-home .top-page-title .title {
    font-size: 40px;
  }

  .home-minimal h2,
  .home-minimal .heading-section .title {
    font-size: 30px;
  }

  .home-minimal .page-title-home .image {
    aspect-ratio: 16 / 10;
    margin-top: 30px;
  }
}

/* ============================================================
   Footer marquee — inner pages
   ============================================================ */

/* The inner-page footer-top contains a 200 px marquee that had no
   overflow guard, letting it bleed across the full viewport. The home
   page footer-top is intentionally empty so it was never visible there.
   Contain it, cap its height, and drop it to a background watermark. */
.footer .footer-inner {
  overflow: hidden;
}

.footer .footer-top {
  overflow: hidden;
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Tone the text down to a watermark — visible but not dominating */
.footer .footer-top .big-text {
  font-size: 96px;
  opacity: 0.06;
  user-select: none;
}

/* Widen the testimonials left column on desktop so the description
   text doesn't collapse to single words per line.
   On mobile (<1200px) the layout already stacks and main.css sets
   max-width: 100%, so no override is needed there. */
@media (min-width: 1201px) {
  .section-testimonial.p-services .left {
    max-width: 460px !important;
  }
}

/* ============================================================
   Portfolio filter tab bar
   ============================================================ */

/* Track on the div (not the ul) — a div's own border is never clipped
   by overflow on its parent. text-align:center then centers the
   inline-flex ul within the full-width bordered div. */
.wg-tab.style-2 {
  text-align: center;
  border-bottom: 1px solid var(--stroke-2);
}

/* inline-flex lets text-align:center center the ul horizontally */
.wg-tab.style-2 ul {
  display: inline-flex !important;
  min-width: max-content !important;
}

/* li as a flex container so <a> stretches to fill li height,
   keeping ::before flush with the div's border-bottom */
.wg-tab.style-2 ul li {
  display: flex;
}

/* Indicator sits at bottom:0 so it lands right at the div border */
.wg-tab.style-2 ul li a::before {
  height: 3px;
  bottom: 0;
  border-radius: 2px 2px 0 0;
}

.wg-tab.style-2 ul li a {
  color: var(--surface);
}

.wg-tab.style-2 ul li a.active,
.wg-tab.style-2 ul li a:hover {
  color: var(--primary);
}

@media (max-width: 768px) {
  .footer .footer-top .big-text {
    font-size: 56px;
  }
}

/* ============================================================
   Inner page banner (About, Contact, FAQ, Pricing, etc.)
   ============================================================ */

/* Give the breadcrumb banner a clear visual identity on all inner
   pages. The base theme left it as raw padding on the dark body — add
   a subtle gradient + bottom border so it reads as a proper section. */
.page-title {
  position: relative;
  background: linear-gradient(
    160deg,
    rgba(67, 186, 255, 0.07) 0%,
    rgba(25, 39, 43, 0) 60%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Tighten the padding — 104 + 126 px was nearly 250 px of blank space */
.page-title .page-title-content {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* Larger, bolder page heading */
.page-title .page-title-content .title {
  font-size: 42px;
  letter-spacing: -0.5px;
  margin-bottom: 20px !important;
}

/* Breadcrumb links — lift them out of the dark with a lighter tint */
.page-title .link-breadkcum,
.page-title .page-breadkcum {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.page-title .link-breadkcum:hover {
  color: var(--primary);
}

.page-title .breadkcum .dot {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Accent glow top-left — mirrors the ring glow used on other sections */
.page-title::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 186, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .page-title .page-title-content {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .page-title .page-title-content .title {
    font-size: 30px;
  }
}

/* ---------------- Footer newsletter form ---------------- */
.sib-form,
#sib-form-container,
#sib-container,
#sib-form {
  width: 100%;
}

.newsletter-form {
  width: 100%;
}

.newsletter-form .flex-grow-1 .input {
  width: 100%;
  min-width: 280px;
}

#newsletter-status {
  margin-top: 12px;
  margin-bottom: 8px;
}

#newsletter-status {
  margin-top: 12px;
  margin-bottom: 8px;
}

/* ---------------- About-us form — services select (light theme) ---------------- */
.form-contact-us select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--white);
  color: var(--main-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 17px 44px 17px 21px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2319272b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  transition: border-color 0.3s ease;
}

.form-contact-us select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-contact-us select option {
  background-color: #ffffff;
  color: #19272b;
}

.form-contact-us select option:disabled {
  color: rgba(25, 39, 43, 0.4);
}

/* ---------------- Contact form — subject select ---------------- */
.form-contact-us.style-bg-dark-2 select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--main-dark);
  color: var(--white);
  border: 1px solid var(--stroke-2);
  border-radius: 12px;
  padding: 15px 44px 15px 25px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  /* inline chevron matching icomoon \e90b angle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  transition: border-color 0.3s ease;
}

.form-contact-us.style-bg-dark-2 select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-contact-us.style-bg-dark-2 select option {
  background-color: #19272b;
  color: #ffffff;
}

.form-contact-us.style-bg-dark-2 select option:disabled {
  color: rgba(255, 255, 255, 0.4);
}

/* ---------------- Contact form — submission status messages ---------------- */
.contact-status-msg {
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-status-success {
  background-color: rgba(107, 192, 68, 0.1);
  border: 1px solid rgba(107, 192, 68, 0.35);
  color: #6bc044;
}

.contact-status-error {
  background-color: rgba(255, 73, 73, 0.1);
  border: 1px solid rgba(255, 73, 73, 0.35);
  color: #ff4949;
}

.form-comment .error {
  color: #ff4949;
  font-size: 12px;
  margin-top: 6px;
  display: block;
}

/* FAQ — sub-title headings that follow an accordion group need top spacing */
.section-faq .wg-according + .sub-title {
  margin-top: 40px;
}

/* Portfolio / Services-details — prev/next navigation
   Raise the section above any overflowing or animated elements (masks),
   make the image anchor block-level, and ensure the text links are always
   above the image in their stacking context. */
.next-prev-details {
  position: relative;
  z-index: 2;
}

.next-prev-item .image {
  display: block;
}

.next-prev-item .link,
.next-prev-item .title {
  position: relative;
  z-index: 1;
}

/* ── Dark-theme nice-select for the sidebar consultation form ── */
.sidebar-contact.bg-dark-2 .nice-select {
  background-color: var(--main-dark);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 9px 18px !important;
  color: var(--white);
}

.sidebar-contact.bg-dark-2 .nice-select > span.current {
  color: rgba(255, 255, 255, 0.55);
}

.sidebar-contact.bg-dark-2 .nice-select::before {
  color: var(--white);
}

.sidebar-contact.bg-dark-2 .nice-select.open {
  border-color: var(--primary) !important;
}

.sidebar-contact.bg-dark-2 .nice-select .list {
  background-color: #1e2d33;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.sidebar-contact.bg-dark-2 .nice-select .option {
  color: rgba(255, 255, 255, 0.75);
}

.sidebar-contact.bg-dark-2 .nice-select .option:hover,
.sidebar-contact.bg-dark-2 .nice-select .option.focus {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--white);
}

.sidebar-contact.bg-dark-2 .nice-select .option.selected {
  color: var(--white);
  font-weight: 600;
}

/* ── Blog comments: initials avatar for dynamic/new comments ── */
.comment-avatar-initial {
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  user-select: none;
}

/* Space between all comment items */
.comment-item + .comment-item,
#dynamic-comments .comment-item {
  margin-top: 30px;
}

/* Reply indicator banner above the comment form */
#reply-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

#reply-indicator .cancel-reply {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.45);
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0 0 0 12px;
}

#reply-indicator .cancel-reply:hover {
  color: var(--white);
}