:root 
{
      --pg-teal: #275D7A; /* Primary */
      --pg-green: #34A798; /* Primary accent */
      --pg-mint2: #57C3AD;
      --pg-mint: #BFD8B8;
      --pg-coral: #F28B82; /* Accent */
      --pg-gold: #F2C94C;  /* Accent */
      --pg-gray: #F5F7FA;  /* Light bg */
      --pg-white: #f7f4ef;
      --pg-text1: #333333;
      --pg-text2: #555;
      --shadow: 0 8px 24px rgba(0,0,0,0.08);
      --radius: 16px;
      --maxw: 1120px;
      --text-on-dark: #ffffff;
      --card-radius: 16px;
}
h1 {
    color: var(--pg-teal); 
    font-weight: bold; 
    font-family: 'Playfair Display', serif; 
    font-weight: 700; 
    font-size: 2rem; 
    line-height: 1.2;
}
.footer {
    padding: 2em 1em;
}
.contact-block .fa {
    font-size: 3em;
    color: var(--pg-coral);
    padding: 0.2em;
}
.contact-block {
    text-align:center;
    padding-bottom: 2em;
}
.copyright-block {
    padding-top: 2em;
    text-align:center;
}
.logo-wrap {
  display: flex;               /* put items side by side */
  align-items: center;         /* vertically align text with logo */
  gap: 10px;                   /* space between logo and text */
}
.brand-name {font-family: 'Raleway', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--teal-700); letter-spacing: .2px; }
.brand-name-sub {color: var(--pg-green);}
.subtle { font-size: 1rem; color: #667;}
.footer-section {color: var(--pg-teal); font-size: 1.1em; font-weight:bold;}
.logo-text {
  padding-left: 1em;
  font-family: 'Raleway', sans-serif; /* or your brand font */
  font-size: 1.1rem;
  font-weight: 600;
  color: #2E7D89;              /* teal from your style guide */
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  text-decoration: none;
  color: #2f3d2c;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #2070A1;
}
.footer-top-bar {
    padding-top: 3em;
    border-bottom: solid var(--pg-green) 1px;
    padding-bottom: 2em;
}
.top-pad {padding-top: 3em;}
.logo {
      width: 75px; height: 70px;
    }
.social {
  display: flex;              /* puts the icons side by side */
  gap: 12px;                  /* space between icons */
  justify-content: right;    /* center them horizontally */
  align-items: center;        /* vertical alignment */
  margin: 1rem 0;
}

.social img {
  width: 32px;                /* size of icons */
  height: 32px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social img:hover {
  transform: scale(1.1);      /* subtle zoom on hover */
  opacity: 0.85;
}
.pg-container { width: 100%; margin: 0 auto; padding: 0 1rem; }
footer { background: var(--gray-050); border-top: 1px solid #e6edf2; padding: 1.5rem 0 2rem; color: var(--text-700); }

.section-diagonal {
  position: relative;
  background: var(--pg-mint);  /* your section background color */
  color: #222;   /* full screen height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;

  /* angled bottom */
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

/* Layout */
.services {
  padding: clamp(1.5rem, 3vw, 3rem) 1rem;
  background: #f5f7fa;
}
.services-heading {
  font: 700 clamp(1.4rem, 2.5vw, 2rem)/1.2 "Raleway", system-ui, sans-serif;
  color: #0f2f35;
  margin: 1rem 0 2rem 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.2rem);
}

/* Card */
.service-card {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #e9eef3;
  margin-bottom: 2em;
}
.service-link {
  display: grid;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* Square media */
.service-media {
  aspect-ratio: 1 / 1;             /* keeps it square */
  background-size: cover;
  background-position: center;
  filter: saturate(1) contrast(1.05);
}

/* Title overlay */
.service-overlay {
  position: absolute;
  inset: auto 0 0 0;               /* bottom overlay */
  padding: 1rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,0) 100%
  );
  color: var(--text-on-dark);
}
.service-title {
  margin: 0;
  font: 700 1.05rem/1.1 "Raleway", system-ui, sans-serif;
  letter-spacing: .02em;
}

/* Slide-up description */
.service-desc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1rem 1.1rem;
  color: var(--text-on-dark);
  background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.5));
  transform: translateY(100%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  font: 400 .95rem/1.45 "Lato", system-ui, sans-serif;
}

/* Hover / focus reveal */
.service-link:hover .service-desc,
.service-link:focus .service-desc,
.service-link:focus-visible .service-desc {
  transform: translateY(0%);
  opacity: 1;
}

/* Optional: slightly lift the image on hover */
.service-link:hover .service-media,
.service-link:focus .service-media {
  transform: scale(1.02);
  transition: transform .35s ease;
}

/* Accessible focus ring */
.service-link:focus-visible {
  outline: 3px solid var(--brand-teal);
  outline-offset: 3px;
}
.intro-header{
  font-family: 'Raleway', sans-serif;
  font-weight:600;
  color:var(--text1); 
  line-height: 1.4em; 
  padding-bottom: 1rem; 
  font-size:1.5rem; 
  padding-top:1rem;
  text-align:center;
}
.intro-paragraph{
  font-size: 1.4rem; line-height:1.2em; text-align:left;
}
.intro-img{
  border-radius: 20px; box-shadow: 5px 5px 10px #333; margin-bottom:2em;
}
.intro-text-box{
  width:100%;
  margin:auto;
}
.intro-text-box p {font-size: 1em;}
.intro-text-box ul {font-size: 1.1em; line-height:1.5em; text-align:left;}
/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .service-desc,
  .service-media {
    transition: none;
  }
}
@media (min-width:920px){
  .intro-img {margin-bottom: 4em !important;}
  .intro-header{
    padding-top:1em !important;
    font-size: 2rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .intro-text-box ul {
    text-align:left; font-size: 1.2rem; line-height:2em;
  }
  .intro-text-box {
    width:80% !important;
    margin-bottom:2rem; text-align:center;
  }
  .intro-text-box p {
    font-size: 1.4rem !important;
    text-align:left !important;
  }
  .hero-content h1 {
            padding-top: 0.5em !important;
            padding-bottom: 0.5em;
            color: #fff;
            font-size: 4rem !important;
        }
}
:root {
      --teal-700: #275D7A; /* Primary */
      --green-500: #34A798; /* Primary accent */
      --green-400: #57C3AD;
      --coral-400: #F28B82; /* Accent */
      --gold-400: #F2C94C;  /* Accent */
      --gray-050: #F5F7FA;  /* Light bg */
      --white: #FFFFFF;
      --text-900: #333333;
      --text-700: #4A4A4A;
      --shadow: 0 8px 24px rgba(0,0,0,0.08);
      --radius: 16px;
      --maxw: 1120px;
    }

    /* Global Reset/Defaults */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text-900);
      line-height: 1.6;
      background: var(--white);
    }
    img { max-width: 100%; display: block; height: auto; }
    a { color: inherit; text-decoration: none; }

    .stack { display: grid; gap: 1.25rem; }

    /* Header */
    header {
      position: sticky; top: 0; z-index: 100;
      background: var(--white);
      border-bottom: 1px solid #e9eef3;
      width:100%;
      min-width:375px;
    }
    .nav { display: flex; align-items: center; justify-content: space-between; padding: 1em !important; }
    .brand { display: flex; align-items: center; gap: .6rem; }
    .nav-links { display: none; gap: 1rem; align-items: center; }
    .nav-links a { font-weight: 600; color: var(--text-700); }
    .nav-cta { display: none; }

    /* Mobile actions */
    .menu-btn { border: 1px solid #d9e3ea; background: var(--white); border-radius: 10px; padding: .55rem .75rem; font-weight: 700; }

    /* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.15rem; border-radius: 999px; border: 0; font-weight: 800; letter-spacing: .2px; cursor: pointer; }
    .btn-primary { background: var(--teal-700); color: var(--white); box-shadow: var(--shadow); }
    .btn-primary:hover { filter: brightness(1.05); }
    .btn-accent { background: var(--green-500); color: var(--white); box-shadow: var(--shadow); }
    .btn-outline { background: transparent; border: 2px solid var(--teal-700); color: var(--teal-700); }

    /* Trust bar */
    .trust { background: var(--white); border-top: 1px solid #edf2f5; border-bottom: 1px solid #edf2f5; 
    padding: 1em; text-align:center;}
    .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--green-500); box-shadow: 0 0 0 4px rgba(107,191,89,.15);
    display:inline-block; margin-right: 1em; margin-left:1em; }

    /* Sections */
    section { padding: 2.25rem 0; }
    h2 { font-family: 'Poppins', serif; font-size: 1.6rem; color: var(--teal-700); margin: 0 0 .5rem; }
    .section-lead { color: var(--text-700); max-width: 70ch; }

    /* Benefits */
    .cards { display: grid; gap: 1rem; }
    .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; }
    .card h3 { font-family: 'Raleway', sans-serif; font-size: 1.05rem; margin: 0 0 .35rem; color: var(--teal-700); }
    .card p { margin: 0; color: var(--text-700); }

    /* Steps */
    .steps { display: grid; gap: 1rem; counter-reset: step; }
    .step { background: var(--gray-050); border: 1px solid #e6edf2; border-radius: var(--radius); padding: 1rem; }
    .step h3 { font-family: 'Raleway', sans-serif; margin: 0 0 .25rem; font-size: 1rem; }
    .step h3::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: .5rem; border-radius: 999px; background: var(--green-500); color: var(--white); font-weight: 800; }

    /* Programs */
    .programs { display: grid; gap: 1rem; }
    .program { border: 1px solid #e6edf2; border-radius: var(--radius); padding: 1rem; background: var(--white); }
    .program h3 { font-family: 'Raleway', sans-serif; margin: 0 0 .35rem; }
    .pill { display: inline-block; background: #fff6ef; color: #b04a25; border: 1px solid #ffd7bf; padding: .2rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }

    /* Testimonials */
    .testimonials { display: grid; gap: 1rem; }
    .quote { background: var(--white); border-left: 4px solid var(--coral-400); padding: 1rem; border-radius: 8px; box-shadow: var(--shadow); }
    .quote p { margin: 0; }
    .quote cite { display: block; margin-top: .5rem; font-weight: 700; color: var(--teal-700); }

    /* CTA band */
    .cta { background: radial-gradient(120% 120% at 10% 20%, rgba(107,191,89,.2), rgba(46,125,137,.3)), var(--teal-700); color: var(--white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
    .cta h3 { font-family: 'Playfair Display', serif; margin: 0 0 .5rem; font-size: 1.35rem; }

    /* Footer */
    
    .foot-col h4 { margin: 0 0 .35rem; font-family: 'Raleway', sans-serif; color: var(--teal-700); }
    

    /* Larger screens */
    @media (min-width: 720px) {
      .nav-links { display: flex; }
      .nav-cta { display: inline-flex; }
      .menu-btn { display: none; }

      .hero-wrap { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 3.25rem 0; }
      h1 { font-size: 2.6rem; padding-top:0.5em; padding-bottom:1em;}
      .lead { font-size: 1.15rem; }

      .trust-list { grid-template-columns: repeat(4, 1fr); }
      .cards { grid-template-columns: repeat(3, 1fr); }
      .steps { grid-template-columns: repeat(3, 1fr); }
      .programs { grid-template-columns: repeat(3, 1fr); }
      .testimonials { grid-template-columns: repeat(2, 1fr); }
      .footgrid { grid-template-columns: 1.4fr 1fr 1fr; }
    }
    /* Container: creates its own stacking context */
        .hero {
        padding: 0 !important;
        position: relative;
        isolation: isolate;            /* <-- key */
        width: 100%;
        height: min(600px, 56.25vw); 
        min-height: 500px; 
        min-width: 375px; /* responsive, max 600px tall */
        overflow: hidden;
        color: #f8f9fb;
        }

        /* Video: base layer */
        .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        display: block;

        }

        /* Overlay as pseudo-element (below content) */
        .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.4) 0%,   /* top slightly lighter */
        rgba(0, 0, 0, 0.7) 100%  /* bottom darker */
        );
        }
        /* Text: top layer */
        .hero-content {
        top: 10%;
        position: relative;
        z-index: 2;                    /* above overlay */
        max-width: 70ch;
        margin: 0 auto;
        padding: clamp(1rem, 3vw, 2rem);
        text-align: center;
        }
        .hero-content h1 {
            padding-top: 1em;
            padding-bottom: 0.5em;
            color: #fff;
            font-size: 2.2rem;
        }

.eyebrow{
  display:inline-block;
  font: 700 .8rem/1.2 "Raleway", system-ui, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:.5rem;
  color:#dff5ee;
}

/* Buttons */
.hero-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.1rem; border-radius:999px; border:2px solid transparent;
  font: 800 1rem/1 "Lato", sans-serif; letter-spacing:.02em; cursor:pointer;
  transition: transform .15s ease, filter .15s ease, background-color .2s ease;
}
.hero-btn-primary{ background:var(--teal-700); color:var(--white); }
.hero-btn-primary:hover{color:#eee; filter:brightness(1.05); transform:translateY(-1px); }
.hero-btn-outline{ background:transparent; color:var(--white); border-color:var(--white); }
.hero-btn-outline:hover{color:#eee; background:rgba(255,255,255,.12); transform:translateY(-1px); }

/* Fallback when no video (JS or prefers-reduced-motion) */
.hero--no-video,
.no-video .hero{
  background: #0d2b31 center/cover no-repeat;
}
.no-video .hero .hero-overlay{ background: rgba(255,255,255,.85); }
.stars {
  color: #FFD700;   /* bright gold */
  margin-right: .35rem;
  font-size: 1rem;  /* adjust as needed */
}
.hero-badge {
  background: rgba(0,0,0,0.5);   /* subtle bg for readability */
  padding: .35rem .7rem;
  border-radius: 999px;
  font: 700 .9rem/1.2 "Raleway", sans-serif;
  color: #fff;
}
section {min-width:375px;}
/* Improve legibility on very small screens */
@media (max-width:420px){
  
   .hero-btn {
    margin-bottom: 2rem;
    margin-right:0 !important;
   }
  .hero p{ display:none; } /* optional: tighten */
}
@media (max-width:767px){
    .section-diagonal{
            padding: 3rem 0.8rem;
  }
  .trust-col {text-align: left;
    padding: 1em;}
  .hide-sm{
    display:none !important;
  }
  .footer-wrap {flex-direction: column;
  margin-bottom:2em;}
  .social {justify-content: center;}
}

.faq details {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  margin-bottom: 1rem;
  padding: 1rem 1.2rem;
  transition: box-shadow .3s ease;
}

.faq details[open] {
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.faq summary {
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #2E7D89; /* your teal */
  outline: none;
}

.faq p {
  margin: .6rem 0 0;
  font-family: 'Lato', sans-serif;
  font-size: .95rem;
  color: #444;
}

.side-menu {
  position: fixed;
  top: 0; right: -300px;  /* hidden off-screen */
  width: 280px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 12px rgba(0,0,0,.15);
  padding: 2rem 1rem;
  transition: right 0.3s ease;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

.side-menu.open { right: 0; }

.side-nav a {
  display: block;
  margin: 1rem 0;
  font-weight: 600;
  color: #2E7D89; /* matches your style guide */
  text-decoration: none;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  align-self: flex-end;
  cursor: pointer;
  color: #333;
}

/* Overlay behind menu */
.overlayx {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1500;
}
.overlayx.active {
  opacity: 1;
  pointer-events: auto;
}

 /* ========== HOW IT WORKS (standalone, framework-safe) ========== */
  .hiw {
    --hiw-teal-700: #19628f;   /* deep teal */
    --hiw-teal-600: #2478ba;   /* brand teal */
    --hiw-teal-300: #7dc8ed;   /* light teal accent */
    --hiw-green-soft: #A8D5A2; /* softer green accent */
    --hiw-ink: #0e2233;
    --hiw-ink-2: #3b5566;
    --hiw-bg: #f7fbfd;
    --hiw-card: #ffffff;
    --hiw-ring: color-mix(in oklab, var(--hiw-teal-600) 25%, white);
    --hiw-radius: 16px;
    --hiw-shadow: 0 8px 24px rgba(9, 51, 74, 0.08);
    --hiw-gap: clamp(16px, 2.5vw, 28px);
  }

  .hiw {
    background: #fff;
    padding: clamp(28px, 5vw, 72px) 16px;
    color: var(--hiw-ink);
  }
  .hiw__header {
    text-align: center;
    margin-bottom: clamp(20px, 4.5vw, 40px);
    padding-bottom:2em;
  }
  .hiw__header h2 {
    margin: 0 0 8px;
    font-size: clamp(28px, 4.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--hiw-teal-700);
  }
  .hiw__sub {
    margin: 0 auto;
    max-width: 60ch;
    font-size: clamp(15px, 2.2vw, 17px);
    color: var(--hiw-ink-2);
  }

  .hiw__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hiw-gap);
    counter-reset: hiw-steps;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .hiw__card {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 16px;
    padding: clamp(16px, 3.5vw, 24px);
    background: var(--hiw-card);
    border-radius: var(--hiw-radius);
    box-shadow: var(--hiw-shadow);
    border: 1px solid rgba(25, 98, 143, 0.08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .hiw__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(9, 51, 74, 0.12);
    border-color: rgba(25, 98, 143, 0.18);
  }

  .hiw__content p {
    margin: 6px 0 0;
    color: var(--hiw-ink-2);
    line-height: 1.55;
    text-align:center;
  }

  .hiw__title {
    margin-bottom: 1em;
    align-items: center;
    gap: 10px;
    font-size: clamp(18px, 2.6vw, 22px);
    color: var(--hiw-ink);
    letter-spacing: -0.01em;
    text-align:center;
  }

  .hiw__badge {
    margin:auto;
    width: 65px;
    padding: 8px 22px;
    border-radius: 54%;
    background: linear-gradient(180deg, var(--pg-teal), var(--pg-green));
    color: #fff;
    font-weight: 600;
    font-size: 2em;
    margin-bottom: 1em;
    box-shadow: 0 4px 10px rgba(36, 120, 186, 0.25);
  }

  .hiw__list {
    margin: 8px 0 0;
    padding-left: 1.1rem;
    color: var(--hiw-ink-2);
  }
  .hiw__list li { margin: 6px 0; }

  .hiw__cta {
    text-align: center;
    margin-top: clamp(18px, 5vw, 36px);
  }
  .hiw__button {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, var(--pg-teal), var(--pg-green));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 8px 16px rgba(25, 98, 143, .25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .hiw__button:hover {color:#eee; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(25, 98, 143, .28); }
  .hiw__button:active { transform: translateY(0); }

  .hiw__fineprint {
    margin: 10px auto 0;
    max-width: 60ch;
    font-size: 13px;
    color: var(--hiw-ink-2);
    opacity: .85;
  }

  /* Responsive grid for larger screens */
  @media (min-width: 740px) {
    .hiw__steps {
      grid-template-columns: repeat(3, 1fr);
    }
    .hiw__card {
      grid-template-columns: 1fr;
      text-align: left;
      min-height: 100%;
    }
    .hiw__icon { margin-bottom: 6px; }
  }

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .hiw__card,
    .hiw__button { transition: none; }
  }

.category-card {
  position: relative;
  aspect-ratio: 1 / 1; /* ensures square shape */
  overflow: hidden;
  border-radius: 8px;
  font-family: sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-card .overlay {
  display: grid;
  place-items: center; /* shorthand for align-items and justify-items */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Full opaque black overlay */
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
}

.overlay-content {
  max-width: 90%;
}

.category-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.category-description {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
}

.category-card .overlay {
  background: rgba(0, 0, 0, 0.6); /* Default dark overlay */
  transition: background 0.3s ease; /* Smooth transition */
}

.category-card:hover .overlay {
  background: rgba(0, 0, 0, 0.3); /* Lightened overlay on hover */
}
.card-title{
      margin-bottom: 1em !important;
}