/*!
Theme Name: Stone Rise Property Advisory
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: stone-rise-property-advisory
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Stone Rise Property Advisory is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

    :root {
      --shell: #eee2de;
      --peach: #ea906c;
      --deep-red: #9c0000;
      --navy: #014e86;
      --soft-navy: #0d2f49;
      --cream: #fff7f3;
    }

    body {
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      background: var(--shell);
      color: #0e1d2c;
      scroll-behavior: smooth;
    }
    a {
        color: #014e86;
        text-decoration: none;
    }
    .fs-10 {
      font-size: 2.25rem !important;
    }
.heading-underline{
  position: relative;
  display: inline-block;     /* critical: svg width matches text width */
}

.heading-underline .u-line{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25em;           /* put it under the text */
  width: 100%;               /* FULL width of the text */
  height: 1.1em;             /* <-- key: gives the curve vertical room */
  overflow: visible;
  pointer-events: none;
}

.heading-underline .u-line path{
  fill: none;
  stroke: #EA906C;
  stroke-width: 3;           /* use a real px stroke */
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}



/*     .heading-underline strong {
        position: relative;
    }
    .heading-underline svg {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        overflow: visible;
        stroke: #ff808b;
        stroke-width: 0.05em;
        stroke-width: 0.05em;
        stroke-linecap: square;
        stroke-linejoin: bevel;
        fill: none;
        opacity: undefined;
    } */
.btn-peach {
    background: #9c0623;
    color: #fff;
    border: none;
    border-radius: 300px;
    padding: 1em 2em;
    font-weight: 400;
    box-shadow: 0 8px 24px rgba(234, 144, 108, 0.3);
    /* line-height: 0; */
}
.btn-peach:hover {
    background: rgb(193 2 39);
    color: #fff;
}
    .text-peach { color: var(--peach) !important; }

.navbar {
    background: rgb(253 249 247 / 86%);
    /* backdrop-filter: blur(10px); */
    margin: 0;
    padding: 5px 0;
}
.navbar-scrolled {
  background: #fdf9f7 !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%239c0000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:focus {
    box-shadow: none;
}
  .navbar-brand img {
    max-width: 250px;
  }
  @media screen and (max-width: 767px) {
    .navbar {
        background: rgb(238 226 222);
  }
  .navbar-brand img {
    max-width: 180px;
  }
}

.nav-link, .nav-link:hover {
    color: var(--navy);
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
}
    /* ===== HERO (Premium + 100vh desktop) ===== */
    .hero {
      position: relative;
      min-height: 100vh;              /* main request */
      display: flex;
      align-items: center;
      padding: 7.5rem 0 4.5rem;       /* enough space under fixed navbar */
      color: #fff;
      overflow: hidden;

      /* background image */
      background:
        url('assets/images/main_image.jpg')
        center/cover no-repeat;
    }

    /* Gradient overlay for strong contrast + modern look */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 25% 35%, rgb(0 0 0 / 25%), #00000000 60%), linear-gradient(135deg, rgb(0 0 0 / 25%), rgb(0 0 0 / 25%) 45%, rgba(220, 208, 204, 0.25));
    /* background: radial-gradient(900px 500px at 25% 35%, rgba(234,144,108,.18), transparent 60%),
        linear-gradient(135deg, rgba(1,78,134,.92), rgba(1,78,134,.72) 45%, rgba(11,28,45,.92)); */
    z-index: 0;
}

    /* Subtle texture */
    .hero::after {
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(0deg, rgba(255,255,255,.05), transparent 45%);
      z-index:0;
    }

    /* Ensure content above overlay */
    .hero .container { position: relative; z-index: 1; }

    /* Left-side text block */
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .45rem .9rem;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.18);
      font-size: .82rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 700;
    }

	.hero h1 {
		font-weight: 800;
		line-height: 1.25;
		letter-spacing: -0.02em;
		margin: 1rem 0 1rem;
		font-size: 3.9rem;
	}

    /* Premium underline highlight for "Confidence" */
    .hero-highlight {
      text-decoration: underline 7px solid rgba(234,144,108,.95);
      text-underline-offset: 8px;
    }

    /* Buttons look cleaner & more premium */
.hero .callout-floating .btn-peach {
    padding: 1em 2em;
    font-weight: 700;
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
}
    .hero .btn-outline-light {
      border-width: 2px;
      padding: 0.85rem 1.65rem;
      font-weight: 700;
      background: rgba(255,255,255,.06);
    }
    .hero .btn-outline-light:hover {
      background: rgba(255,255,255,.14);
    }

    /* Right-side card (make it look modern and “real”) */
.callout-floating {
    background: rgba(255,255,255,.94);
    border-radius: 18px;
    padding: 1.6rem 1.5rem;
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
    border: 1px solid rgb(35 145 225);
    max-width: 390px;
}

    .callout-floating .title-pill {
      background: rgba(1,78,134,.08);
      color: var(--navy);
      border: 1px solid rgba(1,78,134,.12);
      font-weight: 800;
    }

    .callout-floating h5 {
      font-weight: 800;
      letter-spacing: -0.01em;
      margin-bottom: 1rem;
    }

    .callout-floating .form-label {
      font-size: .85rem;
      font-weight: 700;
      color: #ffffff;
    }

.callout-floating .form-control, .callout-floating .form-select {
    border-radius: 12px;
    padding: .40rem 1rem;
    border: 1px solid rgba(20,45,70,.12);
    box-shadow: 0 8px 20px rgba(13,36,56,0.05);
    border-radius: 5px;
}
.callout-floating p.small {
    font-size: 11px;
}
    .callout-floating .form-control:focus,
    .callout-floating .form-select:focus {
      border-color: rgba(234,144,108,.65);
      box-shadow: 0 0 0 .25rem rgba(234,144,108,.18);
    }
.callout-floating .form-control::placeholder {
	font-size: 14px;
}
    /* Add a subtle separator line to improve rhythm */
    .hero-divider {
      width: 64px;
      height: 4px;
      border-radius: 999px;
      background: rgba(234,144,108,.95);
      margin: 1.2rem 0 1.1rem;
    }

    /* Desktop-only 100vh behavior. Mobile should not force 100vh */
    @media (max-width: 991px) {
      .hero {
        min-height: auto;
        padding: 6.5rem 0 3.5rem;
      }
      .callout-floating {
        max-width: 100%;
      }
    }

.callout-floating {
    background: rgb(1 78 134 / 80%);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    color: #ffffff;
    max-width: 435px;
}
    .callout-floating .title-pill {
      display: inline-block;
      background: #f5f7fa;
      color: var(--navy);
      border-radius: 999px;
      padding: 0.35rem 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 0.75rem;
    }
    .callout-floating .form-control,
    .callout-floating .form-select { background: #fff; }

    .section-title, h2 { font-weight: 700; color: #9c0000; margin-bottom: 1rem; }

    .process-timeline-section .section-title, .process-timeline-section h2 { color:var(--navy); }
    .process-timeline-section .section-title span {
      color: #9c0000;
    }
    .muted-lead { color: #385068; }

    .full-section { width: 100%; padding: 5rem 0; }
    .why-card, .info-card {
      background: #ffffff;
      border: 1px solid #e4edf5;
      padding: 1.5rem;
      height: 100%;
      box-shadow: 0 8px 24px rgba(13,36,56,0.05);
    }
    .why-card {
      border-radius: 14px;
    }
    .info-card {
      border-radius: 14px 0 0 14px;
    }
    .info-card h2 {
      color: var(--navy);
    }
    .rounded-right-custom {
      border-radius: 0 14px 14px 0;
    }
	.welcome-section .ratio>* {
		object-fit: cover;
	}
  @media screen and (max-width: 767px) {
    .rounded-right-custom {
      border-radius: 0 0 0 0;
    }
    .why-card, .info-card {
      border-radius: 0 0 0 0;
    }
}
.coral-band {
    background: #DFEEF7;
    color: #000;
    border-radius: 0;
}
.coral-photo {
    width: min(450px ,80vw);
    /* height: 460px; */
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #EA906C;
    box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}
.coral-photo-2 {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #EA906C;
    box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

    .testimonial-card {
        background: #ffffff;
        /* border: 1px solid #e5ecf3; */
        border-radius: 14px;
        padding: 1.5rem;
        height: 100%;
        box-shadow: 0 10px 28px rgba(13,36,56,0.08);
    }
    .contact-section { background: var(--navy); color: #fff; border-radius: 0; }
    .contact-section .form-control, .contact-section .form-select { border-radius: 999px; padding: 0.85rem 1.1rem; }
    .contact-section textarea.form-control { border-radius: 14px; }

    footer {
        background: #FDF9F7;
        color: #000000;
        padding: 3rem 0;
    }

    @media (max-width: 991px) { .hero { padding-top: 6rem; } }

    /* ===== FAQ (like screenshot) ===== */
    .faq-screenshot {
        background: #DFEEF7;
        padding: 5rem 0;
    }

    .faq-pill {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: #e7f1fb;
      color: var(--navy);
      border-radius: 999px;
      padding: .3rem .75rem;
      font-weight: 700;
      font-size: .85rem;
    }

    .faq-title {
      font-weight: 800;
      color: #15293d;
      margin: .75rem 0 2rem 0;
    }

    .faq-title .outline {
      color: #1f4b6a;
      -webkit-text-stroke: 1px #1f4b6a;
      text-shadow: 0 1px 0 rgba(31,75,106,0.15);
    }

    .faq-accordion .accordion-item {
      border: 0;
      background: transparent;
      margin-bottom: 14px;
    }

    .faq-accordion .accordion-button {
      border-radius: 14px !important;
      background: #ffffff;
      box-shadow: 0 10px 26px rgba(13,36,56,0.08);
      padding: 1.1rem 1.25rem;
      font-weight: 700;
      color: #203348;
    }
    .faq-accordion .accordion-item:last-of-type .accordion-button {
      background: #9c0000;
      color: #ffffff;
    }
    .faq-accordion .accordion-item:last-of-type  .accordion-button .chev {
        color: #ffffff;
    }
    .faq-accordion .accordion-item:last-of-type .accordion-button .q-bubble {
        background: #ffffff;
        color: #9c0000;
    }
    .faq-accordion .accordion-button::after { display: none; }
.faq-accordion .accordion-button .q-bubble {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--deep-red);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    margin-right: 12px;
    flex: 0 0 auto;
}

    .faq-accordion .accordion-button .chev {
      margin-left: auto;
      color: #4d6a82;
      transition: transform .2s ease;
    }

    .faq-accordion .accordion-button:not(.collapsed) .chev { transform: rotate(180deg); }

    .faq-accordion .accordion-body {
      background: #ffffff;
      border-radius: 0 0 14px 14px;
      box-shadow: 0 10px 26px rgba(13,36,56,0.08);
      margin-top: -10px;
      padding: 1rem 1.25rem 1.25rem 1.25rem;
      color: #385068;
    }

    /* ===== FUTURX-like Our Process timeline ===== */
    .process-timeline-section {
        background: #FDF9F7;
        padding: 4.5rem 0;
    }

    .process-timeline{
      position:relative;
      max-width: 980px;
      margin: 0 auto;
      padding: 2.5rem 0;
    }

    .process-timeline::before{
      content:"";
      position:absolute;
      left:50%;
      top:0;
      bottom:0;
      width:3px;
      background: rgba(0,0,0,0.6);
      transform: translateX(-50%);
      border-radius:999px;
    }

    .process-scroll-dot{
      position:absolute;
      left:50%;
      width:10px;
      height:10px;
      background: var(--peach);
      border-radius:999px;
      transform: translate(-50%,-50%);
      box-shadow: 0 0 0 6px rgba(234,144,108,0.18);
      top: 0;
      z-index: 2;
    }

    .process-item{
      display:grid;
      grid-template-columns: 1fr 90px 1fr;
      align-items:center;
      margin: 1.6rem 0;
    }

    .process-item .mid{
      display:flex;
      justify-content:center;
    }

    .process-dot{ width:10px;height:10px;border-radius:999px;background: transparent; }

.process-card {
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    padding: 1.05rem 1.15rem;
    box-shadow: 4px 4px 0 var(--deep-red);
    max-width: 360px;
}

    .process-card h6{
      font-weight:800;
      margin:0 0 .35rem 0;
    }

.process-card p {
    margin: 0;
    /* font-size: .92rem; */
    /* line-height: 1.35; */
    /* color: rgba(255,255,255,.88); */
}

    .process-left{ justify-self:end; }
    .process-right{ justify-self:start; }

    .reveal{
      opacity:0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.show{
      opacity:1;
      transform: translateY(0);
    }

    @media (max-width: 991px){
      .process-timeline::before{ left:24px; transform:none; }
      .process-scroll-dot{ left:24px; }

      .process-item{ grid-template-columns: 44px 1fr; gap: 12px; }
      .process-item .mid{ grid-column:1; }
      .process-left, .process-right{
        grid-column:2;
        justify-self:start;
        max-width:100%;
      }
      .process-card{ max-width:100%; }
    }

    /* subtle footer powered-by text */
    .powered-by{
      opacity: .22; /* very light (not noticeable) */
      font-size: .78rem;
      margin-top: .35rem;
    }
    .contact-section .form-control,
    .contact-section .form-select {
      border-radius: 999px;
      padding: 0.95rem 1.1rem;
      border: 1px solid #d9e2ec;
    }

    .contact-section textarea.form-control {
      border-radius: 16px;
    }
    /* ===== Contact Section (Professional) ===== */
  .contact-section {
    background-image: url("assets/images/get-in-touch.jpg");
    background-repeat: no-repeat;
    background-position: center bottom; /* bottom visible */
    background-size: cover;             /* fill without stretching */

    color: #fff;
    position: relative;
}

	.contact-section:before {
		content: "";
		background: radial-gradient(900px 500px at 25% 35%, rgb(0 0 0 / 25%), #00000000 60%), linear-gradient(135deg, rgb(0 0 0 / 25%), rgb(0 0 0 / 25%) 45%, rgba(220, 208, 204, 0.25));
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
    .contact-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .55rem 1.5rem;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      font-weight: 700;
      letter-spacing: .04em;
      color: white;
      font-size: 1.1em;
    }

    .contact-heading {
      font-size: clamp(2rem, 3vw, 2.6rem);
      font-weight: 800;
    }

    .contact-lead {
      color: rgba(255,255,255);
      font-size: 1.05rem;
    }

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 10px;
    border-radius: 5px;
    background: rgb(1 78 134 / 70%);
    border: 1px solid rgb(20 109 173) !important;
}
.contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #014e86;
    font-size: 1.25rem;
    flex-shrink: 0;
}
    .contact-info-title {
      font-weight: 700;
      color: #fff;
    }

    .contact-info-text,
    .contact-info-text a {
      color: rgba(255,255,255,.9);
      text-decoration: none;
    }

    .contact-meta {
      color: rgb(255 255 255);
      font-size: .95rem;
    }

.contact-form-card {
    border-radius: 1.25rem;
    background: rgb(223 238 247 / 87%);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    FONT-VARIANT: JIS04;
    max-width: 480px;
    border: 1px solid #DFEEF7 !important;
}
.contact-form-card p.small {
    font-size: 11px;
    text-align: center;
}
.contact-form-card .form-control, .contact-form-card .form-select {
    border-radius: 5px;
    padding: .40rem 1.1rem;
    font-size: 14px;
}
.contact-form-card textarea.form-control {
    border-radius: 5px;
}

    .contact-form-header {
      /* display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem; */
    }

.contact-form-badge {
    font-size: .8rem;
    font-weight: 700;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 20%);
    color: #ffffff;
}
      /* ===== Testimonials Section ===== */
      .testimonials-section {
          background: #fdf9f7;
          background-image: url("assets/images/accounting-2.jpg");
          position: relative;
      }
      .testimonials-section:before {
          position: absolute;
          content: "";
          background: rgb(0 0 0 / 51%);
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
      }

      .testimonials-header {
        margin-bottom: 1.25rem;
      }

      /* Slick spacing between cards */
      .testimonials-slick {
        margin: 0 -12px; /* creates gutter compensation */
      }
      .testimonials-slick .slick-slide {
        padding: 0 12px; /* card gap */
        height: auto;
      }

      /* Make slick track behave like Bootstrap flex so heights can stretch */
      .testimonials-slick .slick-track {
        display: flex !important;
      }
      .testimonials-slick .slick-slide > div {
        display: flex !important;
        width: 100%;
      }

      /* Card rules (keep your existing .testimonial-card look; these fix layout) */
      .testimonial-card {
          display: flex;
          flex-direction: column;
          height: 100%;
          border-radius: 14px;
          /* border: 1px solid #e5ecf3; */
          background: rgb(255 255 255 / 20%);
          box-shadow: none;
          padding: 2.5rem 2rem;
          backdrop-filter: blur(26px);
      }
      /* Push footer (name + stars) to bottom */
      .testimonial-footer {
        margin-top: auto;
        padding-top: .75rem;
      }

      /* Prevent arrow overlap (reserve space left/right) */
      .testimonials-stage {
        position: relative;
        padding: 0 0; /* room for arrows */
      }

      /* Custom arrows */
      .testimonials-arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 44px;
          height: 44px;
          border-radius: 999px;
          border: 1px solid #FDF9F7;
          background: #FDF9F7;
          display: grid;
          place-items: center;
          cursor: pointer;
          z-index: 2;
          box-shadow: 0 10px 24px rgba(13, 36, 56, 0.12);
      }
      .testimonials-arrow:hover {
        box-shadow: 0 14px 30px rgba(13, 36, 56, 0.18);
      }
      .testimonials-prev { left: 5px; }
      .testimonials-next { right: 5px; }
      @media screen and (min-width: 768px) {
            .testimonials-prev { left: -50px; }
            .testimonials-next { right: -50px; }
      }

      /* Dots centered + clean */
      .testimonials-dots {
        margin-top: 18px;
      }
      .testimonials-dots .slick-dots {
        position: static;
        margin: 0;
        padding: 0;
        display: flex !important;
        justify-content: center;
        gap: 10px;
      }
      .testimonials-dots .slick-dots li {
        width: auto;
        height: auto;
        margin: 0;
      }
      .testimonials-dots .slick-dots li button {
        width: 10px;
        height: 10px;
        padding: 0;
        border-radius: 999px;
        background: #cfd8e3;
      }
      .testimonials-dots .slick-dots li button::before {
        display: none;
      }
      .testimonials-dots .slick-dots li.slick-active button {
        background: var(--peach);
      }
    .testimonial-card p {
        /*font-style: italic;*/
        font-size: 15px;
        line-height: 22px;
    }
      /* Small screen: remove side padding so it doesn't feel cramped */
      @media (max-width: 575px) {
        /* .testimonials-stage { padding: 0 46px; } */
        .testimonials-prev, .testimonials-next {
            display: none !important;
        }
        .testimonials-arrow { width: 40px; height: 40px; }
      }
#applyModal .modal-header .btn-close {
	top: 0;
}	

    .highlight {
      position: relative;
      display: inline-block;
      padding: 0;
    }

    .highlight svg {
		position: absolute;
		display: block;
		top: 7px;
		left: 4px;
		width: 100%;
		height: 100%;
		overflow: visible;
		stroke: #EA906C;
		stroke-width: 0.05em;
		stroke-width: max(1px, 0.05em);
		stroke-linecap: square;
		stroke-linejoin: bevel;
		fill: none;
		z-index: -1;
    }

    .highlight path {
      fill: none;
      stroke: #EA906C;
      stroke-width: 3;
      vector-effect: non-scaling-stroke;
    }

.wpcf7-not-valid-tip {
    color: red;
}
.wpcf7 form.invalid .wpcf7-response-output {
    display: none;
}

.heading-underline .u-line svg path {
    stroke: #FFC107;   /* yellow */
    fill: none;        /* if it's a line */
}
div#exitPopup .modal-body p {
    font-size: 15px;
}

.hero-lead {
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 1.3;
    color: #fff;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);

    /* more transparent background */
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    padding: 12px 22px;
    border-radius: 15px;
}