.page-node-type-page .palette-bg-light-gray {
  background: #f7f8f7;
}
.palette-bg-light-gray:nth-child(even) {
  background: white; 
} 

.page-node-type-page.page-node-type-marketing-page .page-title, .page-node-type-page.page-node-type-marketing-page .region-breadcrumb {
  display: block;
}

.breadcrumb {
  padding-left: calc(50% - 600px);
  padding-top: 2rem;
}

.page-title {
  padding-left: calc(50% - 600px);
}

.text-highlight {
  font-style: normal;
  border-radius: 1em 0 1em 0;
  text-shadow: 1px 1px 1px #fff;
  background-image: 
    linear-gradient(-100deg, 
      rgba(254, 225, 26,0.15),
      rgba(254, 225, 26,0.8) 100%, 
      rgba(254, 225, 26,0.25)
    );
}

.envelope h2:last-child, .envelope p:last-child {
  margin-bottom: .8rem;
}

.block-page-title-block, .block-system-breadcrumb-block {
  padding: 0 15px;
}

.svg a, .svg a:hover {
  text-decoration: none;
  font-variation-settings: var(--font-bold) !important;
  font-weight: 600;
}

/* Apply transition to the <g> elements for smooth animation */
#comprehension,
#fluency,
#vocabulary,
#phonics,
#phonemic {
    transition: filter 0.3s ease-in-out,transform 0.3s ease-in-out;
    transform-origin: center center; /* Ensure scaling and positioning from the center */
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); /* Initial subtle shadow for smoothness */
}

/* When the <a> inside a <g> is hovered, apply transformations to the parent <g> */
#fluency a:hover,
#phonics a:hover,
#phonemic a:hover,
#vocabulary a:hover,
#comprehension a:hover{
    transform: scale(1.01) translateY(-2px); /* move slightly upwards */
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3)); /* Add a more prominent shadow */
}


#phonemic a:hover
{
    filter: drop-shadow(0 0 20px rgba(192, 73, 127)); /* Add a more prominent shadow */
}
#phonics a:hover
{
    filter: drop-shadow(0 0 20px rgba(226, 225, 27)); /* Add a more prominent shadow */
}
#comprehension a:hover
{
    filter: drop-shadow(0 0 20px rgba(130, 117, 167)); /* Add a more prominent shadow */
}
#fluency a:hover
{
    filter: drop-shadow(0 0 20px rgba(72, 157, 70)); /* Add a more prominent shadow */
}
#vocabulary a:hover
{
    filter: drop-shadow(0 0 20px rgba(0, 165, 181)); /* Add a more prominent shadow */
}

.card-v2.card-pz {
  border: 3px solid #000; /* A  border */
  border-radius: 15px; /* Rounded corners for a fun, soft look */
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.7); /*  shadow with blur and spread */
  text-align: center; /* Center text */
  background-color: #f7f8f7; /* Light background */
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for hover effects */
  box-sizing: border-box;
}
.card-v2.card-pz .grid.grid--2col img{
  max-width: 50%;
  margin: 0 auto;
}

.card-v2.card-pz.card-menu {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .1) !important; 
    text-align: left; 
}

.card-v2.card-pz.card-menu .card-v2__title {
  position: relative;
}

.card-v2.card-pz.card-menu .card-v2__title img {
  display: none;
}

.card-v2.card-pz:hover {
    box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
    transform: translateY(-2px); /* Slightly lift the element on hover */
}

.card-v2.card-pz.card-menu:hover {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); 
  transform: translateY(0px); 
}
.card-v2.card-pz .card-v2__title a , #toc a{
  transition: filter 0.3s ease;
}

.card-v2.card-pz .card-v2__title a:hover,  #toc a:hover {
  filter: brightness(0.8); /* Darkens the color to 80% of its original brightness */
}


.card-v2.card-pz.phonemic {
  border-color: #c0497f;
  background-color: #F3EDEF;
  box-shadow: 0 0 15px 5px rgba(192, 73, 127, 0.5);
}

.card-v2.card-pz.phonemic:hover {
    box-shadow: 0 0 25px 8px rgba(192, 73, 127, 0.9); /* Stronger shadow on hover */
}

.card-v2.phonemic .card-v2__title a, .card-v2.phonemic.card-menu a, .card-v2.phonemic .card-v2__title{
  color: #8D1D58;
}

.card-v2.card-pz.phonics {
  border-color: #e2e11b;
  background-color: #F5F6EA;
  box-shadow: 0 0 15px 5px rgba(226, 225, 27, 0.5);
}

.card-v2.card-pz.phonics:hover {
    box-shadow: 0 0 25px 8px rgba(226, 225, 27, 0.9); /* Stronger shadow on hover */
}

.card-v2.phonics .card-v2__title a , .card-v2.phonics.card-menu a, .card-v2.phonics .card-v2__title{
  color: #6C6C0D;
}

.card-v2.card-pz.comprehension {
  border-color: #8275a7;
  background-color: #E9E9ED;
  box-shadow: 0 0 15px 5px rgba(130, 117, 167, 0.5);

}

.card-v2.card-pz.comprehension:hover {
    box-shadow: 0 0 25px 8px rgba(130, 117, 167, 0.9); /* Stronger shadow on hover */
}

.card-v2.comprehension .card-v2__title a, .card-v2.comprehension.card-menu a, .card-v2.comprehension .card-v2__title {
  color: #8275a7;
}

.card-v2.card-pz.fluency {
  border-color: #489d46;
  background-color: #ECF2EC;
  box-shadow: 0 0 15px 5px rgba(72, 157, 70, 0.5);
 
}

.card-v2.card-pz.fluency:hover {
    box-shadow: 0 0 25px 8px rgba(72, 157, 70, 0.9); /* Stronger shadow on hover */
}

.card-v2.fluency .card-v2__title a, .card-v2.fluency.card-menu a, .card-v2.fluency .card-v2__title {
  color: #489d46;
}

.card-v2.card-pz.vocabulary {
  border-color: #00a5b5;
  background-color: #DBEEEF;
  box-shadow: 0 0 15px 5px rgba(0, 165, 181, 0.5);
  
}

.card-v2.card-pz.vocabulary:hover {
    box-shadow: 0 0 25px 8px rgba(0, 165, 181, 0.9); /* Stronger shadow on hover */
}

.card-v2.vocabulary .card-v2__title a, .card-v2.vocabulary.card-menu a, .card-v2.vocabulary .card-v2__title  {
  color: #038693;
}

/* fix big margin problem */
.clearfix .longform-layout.longform-layout--content {
  margin-bottom: 0px;
}

.center--block {
  display: flex;
  justify-content: center;
 }

@media screen and (min-width: 960px) {
   .grid--2col  .grid--2col {
      --grid-min-width: 50%;
   }

   .card-v2.card-pz .grid.grid--2col img{
      max-width: 100%;
    }

  .card-v2.card-pz.card-menu .card-v2__title img {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 155px;
  }

}