.banner-social-and-button {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}
.banner-social-links {
	flex: 1;
}
.banner-social-links .social-icons {
	display: flex;
	gap: 10px;
	justify-content: flex-start;
	list-style: none;
	padding: 0;
}
.banner-social-links .social-icons li {
	display: inline-block;
}

.button-center {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}
.button-container {
	flex-shrink: 0;
	z-index: 9;
}

.link-banner .banner-text {
    margin-bottom: 20px;
    }

.contact-banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 20px;
	position: relative;
	width: 100%;
	min-height: 30vh;
}

.contact-banner .banner-content {
    align-items: flex-start;
    display: flex;
    padding: 30px 0px 0px 0px;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.contact-banner .banner-text {
    flex: 1;
    text-align: left;
    margin-bottom: 1px;
    margin-top: 0px;
    padding-right: 25%;
}
.contact-banner .banner-text p {
	margin-bottom: 2px;
}
.contact-banner .button {
border-radius: 12px;
    display: flex;
    flex: 1 1 calc(50% - 20px);
   padding: 10px 20px 10px 20px;
    text-decoration: none;
    z-index: 5;
    justify-content: center;
    align-items: center;
    min-width: 222px;
}


.link-banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: 100%;
}


.link-banner .banner-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	max-width: 1200px;
	position: relative;
	width: 100%;
	z-index: 2;
}

.link-banner .banner-text {
	flex: 1;
	text-align: left;
	margin-bottom: 1px;
	margin-top: 0px;
	padding-right: 160px;
	padding-left: 20px;
}
.link-banner .banner-text p {
	margin-bottom: 2px;
}

.link-banner .button {
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 22px;
    text-decoration: none;
    z-index: 5;
    line-height: 110%;
}

.links-button-container {
    width: 97%;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    align-items: stretch;
}

.contact-banner {
    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    padding: 20px;
    overflow: hidden;
}

.contact-banner .banner-content {
    position: relative;
    z-index: 5; }


/* When we add .visible, fade to your desired 0.5 */
.contact-banner.visible::before {
  opacity: 0.5;
}



/* 1) Base rule for every banner pseudo-element */
.contact-banner::before {
  content: '';
  position: absolute;
  /* allow override of top/bottom */
  top: var(--banner-top, 0);
  bottom: var(--banner-bottom, auto);
  left: 0;
  width: 100%;
  height: 100%;
  /* image & scale come from custom props */
  background-image: var(--banner-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
   opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
  pointer-events: none;
  transform: scale(var(--banner-scale, 1));
  transform-origin: right center;
}

/* 2) Per-banner overrides: just set the props that differ */
.contact-banner.hills {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/hills_white.svg');
  --banner-scale: 1;
}
.contact-banner.bird {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/bird_white.svg');
  --banner-scale: 1.2;
}
.contact-banner.flowers {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/flowers_white.svg');
  --banner-scale: 1;
}
.contact-banner.heritage {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/heritage_white.svg');
  --banner-scale: 1;
}
.contact-banner.stones {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/stones_white.svg');
  --banner-scale: 1;
}
.contact-banner.crops {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/crops_white.svg');
  --banner-scale: 1;
}
.contact-banner.plant {
  /* move the graphic down to the bottom */
  --banner-top: auto;
  --banner-bottom: 0;
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/plant_white.svg');
  --banner-scale: 1;
}
.contact-banner.river {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/river_white.svg');
  --banner-scale: 1.2;
}
.contact-banner.signpost {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/signpost_white.svg');
  --banner-scale: 1;
}
.contact-banner.dog {
  --banner-image: url('/wp-content/themes/rockhopper/assets/images/dog_white.svg');
  --banner-scale: 1;
}

/* Content inside the banner stays above the transparent image */


@media (max-width: 768px) {
.contact-banner.hills, 
.contact-banner.bird,
.contact-banner.flower,
.contact-banner.flowers,
.contact-banner.heritage,
.contact-banner.crops,
.contact-banner.stones,
.contact-banner.plant,
.contact-banner.signpost,
.contact-banner.dog  {
  --banner-scale: 0.7; 
}
.contact-banner::before {
  background-position: right bottom;
        transform-origin: right bottom;}

}

.contact-banner.river::before {
    background-position: 160%;
}


/* 2 columns on small screens */
@media (max-width: 599px) {
  .links-button-container a,
  .links-button-container span {
    flex: 0 0 calc((100% - 1 * 12px) / 2);
    text-align: center;
  }

.link-banner .banner-text {
  padding-right: 10px;
  padding-left: 10px;
}


}

/* 3 columns on small/medium screens */
@media (min-width: 600px) and (max-width: 899px) {
  .links-button-container a,
  .links-button-container span {
    flex: 0 0 calc((100% - 2 * 12px) / 3);
    text-align: center;
  }
}

/* 4 columns on medium/large screens */
@media (min-width: 900px) and (max-width: 1199px) {
  .links-button-container a,
  .links-button-container span {
    flex: 0 0 calc((100% - 3 * 12px) / 4);
    text-align: center;
  }
}

/* 5 columns on full width */
@media (min-width: 1200px) {
  .links-button-container a,
  .links-button-container span {
    flex: 0 0 calc((100% - 4 * 12px) / 5);
    text-align: center;
  }
}

/* Hide content in dummy items */
.dummy {
  visibility: hidden;
}