/* Beyond Legal theme overrides — fixes for Webflow export shipped without Interactions (IX2) data.
   Loaded after beyondlegal.webflow.css; relies on source-order specificity, no !important needed. */

/* 1 & 2. Button text disappearing / shifting on hover (navbar "Contact", hero "Our Practice",
   all .cta-main/.cta-book buttons). Confirmed via live DevTools inspection: webflow.js's IX2
   engine applies an inline `transform: translate3d(0, -1.5em, 0)` to .button-text on hover,
   sliding it up out of the 20px-tall masked window (.button-text-mask {height:20px;
   overflow:hidden}). It's designed as a "slide up to reveal duplicate line" effect, but the
   exported markup only has ONE text node — there's nothing underneath to slide into view, so
   the text just vanishes. This is an incomplete component baked into the Webflow export itself,
   not something we introduced. Fix: force the JS-applied inline transform back to none.
   CSS !important always wins over a plain (non-important) inline style. */
.button-text-mask,
.button-text,
.button-text-2,
.button-text-mask-2,
.cta-main > div:not([class*="button-bg"]) {
  transform: none !important;
  position: relative;
  z-index: 2;
}

.button-bg,
.button-bg-2,
.button-bg-3 {
  z-index: 1;
}

/* 3. Strategic Practice Pillars (.service-item / .deskripsi-hover).
   .deskripsi-hover ships with line-height:3px (collapsed), meant to expand via Interactions
   on hover — that IX2 data is missing from this export (see note above), so it never expands
   on any device. Show the description directly, always, no hover required. */
.deskripsi-hover {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  line-height: 1.4;
  margin-top: 8px;
}

.left-service-item {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.icon-service-arrow {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .left-service-item {
    flex-flow: row;
  }
}

/* 4. Insights list — 2 cards per row on mobile instead of one full-width
   stacked card (full-width made the thumbnail dominate the screen; a fixed
   160px cap made it too small — 2-column grid lets the thumbnail scale
   naturally with its column instead of needing an arbitrary fixed size).
   Vendor .card-article stays flex-flow:row with no wrap, so each card's
   thumbnail needs its own row (hence flex-flow:column here) or
   .text-wrap-article-card gets squeezed to nothing in the same row.
   !important because vendor CSS re-declares .image-wrap-article-card at its
   own 479px breakpoint (width/height:40px) — confirmed the plain override
   loses to it below ~479px despite this stylesheet loading later in the
   cascade. */
@media screen and (max-width: 767px) {
  .blog-halves {
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 12px !important;
  }

  .card-article {
    flex-flow: column !important;
  }

  .image-wrap-article-card {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
}

/* 4b. Insights thumbnails cropped on both mobile and desktop — box is a 1:1
   square (.image-wrap-article-card) but existing thumbnails were generated
   at 980x631 (landscape) because the beyondlegal theme config was missing
   an 'image.blog.blogthumbnail' size override (default/posh themes have
   one; beyondlegal never did — see resources/themes/beyondlegal/config/
   config.php, now fixed to 400x400 for future uploads). Existing landscape
   thumbnails can't be retroactively resized, so use object-fit:contain
   (show full image, no crop) instead of cover, at every breakpoint. */
.image-wrap-article-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 5. Partnership "Founding Partner" section overflowing horizontally on mobile. */
@media screen and (max-width: 767px) {
  .section.home-a-system-section.leadership {
    overflow-x: hidden;
  }

  .image-wrap-column.home {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .text-block-4 {
    overflow-wrap: anywhere;
  }
}

/* 6a. Practice-area "How We Work" text section (.section-20:not(.about-c-marquee-section)).
   .main-container-16 ships with padding-left/right:0 intentionally — the marquee above
   it needs full-bleed edge-to-edge. The "How We Work" prose section reuses the same
   container and ends up flush against the viewport edge. Scope padding to the non-marquee
   instance only so the marquee stays unaffected. */
.section-20:not(.about-c-marquee-section) .main-container-16 {
  padding-left: 32px;
  padding-right: 32px;
}

/* 6. Practice-area "How We Work" image marquee (.marquee-home-c) not moving.
   Same root cause as above: Webflow's scroll-triggered loop animation for
   .marquee-inner-home-c lives in the missing IX2 interactions data, so the
   inline translate3d it would apply never runs. We render 3 identical copies
   of .single-marquee-service specifically so a plain CSS loop can shift by
   -33.333% (one copy width) and land back on an identical frame — seamless,
   no JS needed. */
.marquee-inner-home-c {
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

.marquee-home-c:hover .marquee-inner-home-c {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-33.3333%, 0, 0);
  }
}

/* 7. "Request a Consultation" button (.book-button-bg.light-9) washes out to
   grey at every responsive breakpoint. beyondlegal.webflow.css redefines
   .book-button-bg.light-9's background-color inside FOUR separate @media
   blocks (#cecece, #d6d7d7, #d3d5d4, #d6d8d8) — present in the original
   Webflow export too, just easy to miss since each only triggers within its
   own viewport range. One !important rule beats all of them regardless of
   which breakpoint is active. */
.book-button-bg.light-9 {
  background-color: #1a1a17 !important;
}

/* 8. International page partner photo carousel, CMS-backed via Gallery
   model (type=partner). Replaces the old hardcoded photo-drift hero.
   Reuses practice-area/home's existing .marquee-home-c / .marquee-inner-home-c
   / .single-marquee-service / .marquee-service-item auto-scroll pattern
   verbatim (same 3x-duplicated-track + marquee-scroll keyframe, both already
   defined below and in beyondlegal.webflow.css) — carousel behavior unchanged.

   Partner photos are a mix of portrait and landscape (uploaded by admin, not
   curated to one aspect ratio) — the base .marquee-service-item is a fixed
   400x400 square with object-fit:cover, so any landscape shot gets its sides
   cropped off (reported: photo center cut, subjects clipped). Scoped to
   .partner-marquee only, so the OTHER marquee instances (home/practice-area,
   curated to square crops on purpose) stay untouched: fix height, let width
   follow the image's natural aspect ratio instead of cropping to a square. */
.partner-marquee .marquee-service-item {
  width: auto;
}

.partner-marquee .marquee-service-item img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* 9. About page "Our Values" eyebrow (.grid-team-indent .eyebrow) stretches
   to vertically center itself in the tall grid row next to the accordion.
   The original ties this to a Webflow-generated #w-node-... id (align-self:
   start, place-self: start above 1440px) that only exists on that page's
   specific element instance — our shared blade markup doesn't carry those
   auto-generated ids, so pin it by structural class instead. */
.grid-team-indent > .eyebrow {
  align-self: start !important;
}

/* 10. "Request Consultation" CTA (.cta-book.light / .book-button-bg.light-9)
   sits on top of a dark video hero on home and practice-area — the global
   dark override from fix #7 makes it nearly invisible against that backdrop
   (dark pill on a dark video). Same problem on two other dark backdrops,
   both confirmed by inspecting their actual background-color rather than
   assuming from the section name:
   - .callout-section (the "Need Guidance..." / "Operating Across Borders?" /
     "Partnership Path" block shared verbatim by practice-area, international,
     and partnership) — dark navy.
   - .card-case-long (about page "quote card", background-color: #1f334b) —
     also dark navy, only used on this one page/instance.
   Every OTHER use of this button (content columns, partnership Founding
   Partner) sits on a light background where a dark pill is correct and must
   stay untouched. Reset to the button's own base cream color (matches
   .book-button-bg's unmodified background-color) scoped to these sections
   only. */
.hero-home-a-section .book-button-bg.light-9,
.hero-home-b-section .book-button-bg.light-9,
.callout-section .book-button-bg.light-9,
.card-case-long .book-button-bg.light-9,
.home-a-system-section.about1 .book-button-bg.light-9 {
  background-color: #f4f3ea !important;
}

/* 11. Every dark-pill instance of that same CTA (.button-text.text-color-black
   inside .cta-book.light) paints black text on the near-black pill — the
   real bug all along, not the background. Flip the label to light on the
   dark pill; the sections above use the cream pill instead, so re-flip back
   to dark text only there to keep reading right. */
.cta-book.light .button-text.text-color-black {
  color: #f4f3ea !important;
}

.hero-home-a-section .cta-book.light .button-text.text-color-black,
.hero-home-b-section .cta-book.light .button-text.text-color-black,
.callout-section .cta-book.light .button-text.text-color-black,
.card-case-long .cta-book.light .button-text.text-color-black,
.home-a-system-section.about1 .cta-book.light .button-text.text-color-black {
  color: #1a1a17 !important;
}

/* 13. Mobile nav dropdown (.nav-menu open state) rendered with no background —
   just the raw link text floating over whatever page content sits behind the
   navbar. Root cause: webflow.js's core nav-open behavior makes .nav-menu an
   absolutely-positioned overlay (top:100%, height from content) so it can
   float above the page without pushing it down — but that means .navbar's
   own box never grows past its closed (pill-bar) height. The original
   .nav-bg-wrap.mobile is a *sibling* of the menu sized via inset:0 against
   .navbar, so it correctly covers the closed pill bar — but stays pinned to
   that same small box even when the menu opens, never reaching the expanded
   dropdown below it.
   Fix: added a *second* .nav-bg-wrap.mobile (nav.blade.php,
   .dropdown-open-bg) nested inside .nav-menu itself, purely for the open
   state — inset:0 there resolves against the menu's own box, which already
   sizes correctly since webflow.js handles nav-menu's own open/close
   natively (no missing IX2 data there). The original sibling copy is left
   untouched so the closed pill bar keeps its background. Absolutely-
   positioned elements paint above static ones regardless of DOM order, so
   the link wrappers need position:relative to stay stacked above this
   nested background layer. */
.nav-menu > .nav-bg-wrap.mobile {
  z-index: 0;
}

.wrap-nav-links,
.wrap-mobile-menu {
  position: relative;
  z-index: 1;
}

/* 14. Insights mobile filter — convert badge row to native <select> dropdown
   below 768px. Desktop keeps the original horizontal badge list. */
.blog-filter-select {
  display: none;
}

@media screen and (max-width: 767px) {
  .blog-filter-mask {
    width: 100%;
  }

  .blog-filter-mask .blog-filters-list {
    display: none;
  }

  .blog-filter-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 32px;
    padding: 12px 40px 12px 20px;
    border: 1px solid #1f191552;
    border-radius: 99px;
    background-color: #fffdf629;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #1f1915;
    -webkit-appearance: none;
    appearance: none;
    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='%231f1915' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    cursor: pointer;
  }

  .blog-filter-select:focus {
    outline: none;
    border-color: #1f1915;
  }

  .blog-filter-select option {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
  }
}

/* 15. Insights page title hidden under the floating navbar on narrow phones.
   .master-navigation is position:fixed (floats over content, ~76px tall pill).
   Vendor CSS gives .section-16 padding-top:80px by default — plenty of clearance
   — but drops it to just 20px below 479px, so the h1 renders mostly behind the
   nav pill. Only blog/index and blog/detail use bare .section-16 (no modifier),
   so bumping it here is safe. */
@media screen and (max-width: 479px) {
  .section-16 {
    padding-top: 100px;
  }
}

/* 15. About page "Our Standards" section (.main-features-halves) — image-to-
   text gap too tight at every width. Vendor CSS only ever gives it 32px
   (grid-column-gap/grid-row-gap, same value, same rule) whether the columns
   sit side-by-side at desktop or stack below 991px. Bump both: column-gap
   unconditionally (only matters once the 2-column layout is active above
   991px; harmless at mobile since there's no second column to space from),
   row-gap specifically below 991px once it stacks to a single column. */
.main-features-halves {
  grid-column-gap: 120px;
}

@media screen and (max-width: 991px) {
  .main-features-halves {
    grid-row-gap: 64px;
  }
}

/* 12. International page "About Us" button (.cta-main-17) arrow icon
   (.button-arrow-2 svg, stroke="currentColor") inherits the button's base
   color: #0e0e0e (near-black) instead of the white the label text next to
   it explicitly opts into via .text-color-white — near-invisible against
   the button's dark navy background. Same bug in the original design. */
.cta-main-17 .button-arrow-2 {
  color: #f4f3ea;
}

/* 16. Service manifesto video section — plain CSS background video,
   bypasses webflow.js .w-background-video initialization entirely. */
.about-video--custom {
  position: relative;
  overflow: hidden;
}

.about-video__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 17. Service detail hero image — single image spans full 4-column grid. */
.service-hero-grid {
  margin-top: 48px;
}

.service-hero-image {
  grid-column: 1 / -1 !important;
  height: 420px !important;
}

@media screen and (max-width: 767px) {
  .service-hero-image {
    height: 240px !important;
  }
}

/* 17. Service "Who We Serve" cards — icon above text. */
.card-service-icon {
  color: #1a1a17;
  margin-bottom: 16px;
  display: flex;
}

.card-service-icon svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* 17. Partnership page — team member card modal. */
.member-card--clickable {
  cursor: pointer;
}

.team-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.team-modal-overlay.is-open {
  display: flex;
}

.team-modal-box {
  position: relative;
  background: #0e1d2e;
  border-radius: 16px;
  max-width: 960px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 48px;
}

.team-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #f4f3ea;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.team-modal-close:hover {
  opacity: 1;
}

.team-modal-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
}

.team-modal-photo {
  width: 200px;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.team-modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-modal-box .label-7 {
  color: #f4f3ea !important;
}

.team-modal-role-text {
  color: #b8a87a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.team-modal-bio-text {
  color: #c8cdd5;
  line-height: 1.7;
  margin-top: 8px;
}

.team-modal-cv-link {
  display: none;
  margin-top: 16px;
  color: #b8a87a;
  text-decoration: underline;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}

.team-modal-cv-link:hover {
  color: #f4f3ea;
}

@media screen and (max-width: 767px) {
  .team-modal-box {
    padding: 32px 24px;
  }

  .team-modal-inner {
    grid-template-columns: 1fr;
  }

  .team-modal-photo {
    width: 100%;
    height: 220px;
  }
}

/* 18. Home hero — bold highlights (Indonesia, Asia-Pacific, tagline) warm gold. */
.text-block-38 strong {
  color: #f2dbab;
}

/* 19. Home manifesto video section — .button-bg-2 is dark navy on dark video = invisible.
   Give it a frosted-glass cream border so the pill is legible on any dark backdrop. */
.testimonial-video-section .button-bg-2 {
  background-color: rgba(244, 243, 234, 0.12) !important;
  border: 1px solid rgba(244, 243, 234, 0.45) !important;
}

/* 19b. Blog detail .ck-content — normalize.css resets p/heading margins to 0 and the
   theme's global h1/h2 rules make headings enormous inside the article body.
   Scope fixes here so nothing outside .article-body is touched. */
.article-body .ck-content p {
  margin-bottom: 1em;
}

.article-body .ck-content h1 { font-size: 2.3em !important; font-weight: 700 !important; line-height: 1.2 !important; margin-top: 1.5em; margin-bottom: 0.4em; }
.article-body .ck-content h2 { font-size: 1.84em !important; font-weight: 700 !important; line-height: 1.2 !important; margin-top: 1.5em; margin-bottom: 0.4em; }
.article-body .ck-content h3 { font-size: 1.48em !important; font-weight: 700 !important; line-height: 1.2 !important; margin-top: 1.25em; margin-bottom: 0.3em; }
.article-body .ck-content h4 { font-size: 1.22em !important; font-weight: 700 !important; line-height: 1.2 !important; margin-top: 1.25em; margin-bottom: 0.3em; }
.article-body .ck-content h5 { font-size: 1.06em !important; font-weight: 700 !important; line-height: 1.2 !important; margin-top: 1.25em; margin-bottom: 0.3em; }
.article-body .ck-content h6 { font-size: 1em !important; font-weight: 700 !important; line-height: 1.2 !important; margin-top: 1.25em; margin-bottom: 0.3em; }

/* First heading at top of content needs no extra top gap. */
.article-body .ck-content > h1:first-child,
.article-body .ck-content > h2:first-child,
.article-body .ck-content > h3:first-child {
  margin-top: 0;
}

/* 20. Blog detail rich-text body (.article-body.w-richtext) renders content images
   as a tiny 40x40 box. Root cause confirmed via live DOM/CSS inspection (not a
   missing-responsive-image issue): beyondlegal.webflow.css defines a generic
   ".image { width: 40px; height: 40px; display: block; }" inside
   "@media (min-width: 1440px)" — a small-icon utility class used elsewhere in the
   design — and CKEditor5 happens to wrap every content image in
   "<figure class='image'>...", so the two collide by class-name coincidence.
   Scope the override to the blog body only, so the legit icon usages of .image
   elsewhere are untouched. */
.article-body figure.image {
  width: auto;
  height: auto;
  max-width: 60%;
}

.article-body figure.image img {
  width: 100%;
  height: auto;
}

/* 21. Blog detail rich-text body links (CKEditor <a> tags) render as plain black
   text — no link styling defined anywhere in the theme for .article-body/.w-richtext
   content. Use the theme's existing navy accent (matches .card-case-long /
   .team-modal-box) rather than a generic web-blue, so it stays on-brand. */
.article-body a {
  color: #1f334b;
  text-decoration: underline;
}

.article-body a:hover {
  color: #0b192a;
}

/* 22. Partnership page affiliate logo tiles (.nl-tile-logos-5) — clicking the
   card's white padding around the logo did nothing, only the logo image
   itself was clickable. Root cause: .nl-tile-logos-5 is display:flex with
   padding:32px, align-items/justify-content:center — the <a> wrapping the
   <img> shrinks to the image's own box (default flex-item sizing), so it
   never covers the padded area around it. Stretch the anchor to fill the
   whole tile instead. */
.nl-tile-logos-5 a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* 23. Partnership page affiliate logos render tiny — vendor .nl-logo-logos-5
   caps height at 48px regardless of the tile's actual size (min-height:172px,
   padding:32px), leaving a huge card around a small logo. Shrink the vendor
   padding and bump the logo height so it actually fills the tile. */
.nl-tile-logos-5 {
  padding: 16px;
}

.nl-logo-logos-5 {
  height: 120px;
}

@media screen and (max-width: 767px) {
  .nl-logo-logos-5 {
    height: 88px;
  }
}

/* 24. Blog detail rich-text body (.article-body) — normalize.css strips ALL
   table styling site-wide (border-collapse, td/th padding:0, no borders
   anywhere), so a table inserted via the CKEditor content editor renders as
   an invisible grid of unbordered, unpadded text. Scoped to the article body
   only, so any other (currently nonexistent) table usage elsewhere is
   unaffected. */
.article-body table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
}

.article-body th,
.article-body td {
  padding: 8px 12px;
  border: 1px solid #d1d1d1;
  text-align: left;
}

.article-body th {
  background-color: #f4f3ea;
  font-weight: 600;
}

/* 25. WhatsApp floating button — fixed bottom-right.
   Configurable in Settings > Store (Hello Bar Text / WhatsApp Number);
   hidden entirely when no number is set. */
.hello-bar {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px;
  background-color: #1f324b;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 1px 6px rgba(0,0,0,0.2);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.hello-bar::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 2.125.554 4.122 1.523 5.855L.057 23.25a.75.75 0 0 0 .916.99l5.6-1.463A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.71 9.71 0 0 1-4.962-1.36l-.356-.213-3.684.963.984-3.595-.232-.37A9.712 9.712 0 0 1 2.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

.hello-bar:hover {
  background-color: #162538;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
}

/* 26. Contact page email/phone cards (.card-contact-c) now clickable
   (mailto: / wa.me links) - the global `a { text-decoration: underline }`
   base rule would otherwise underline this card's title text. */
.card-contact-c {
  text-decoration: none;
  color: #f7f7f2;
}

.card-contact-c:hover {
  text-decoration: none;
  color: #f7f7f2;