@import url("https://fonts.googleapis.com/css2?family=Parisienne&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
/************ TEMPLATE  ************

************/

.site-1 {
  --primary-color: var(--red-color);
  --secondary-color: var(--light-blue);
  --tertiary-color: var(--dark-blue);
  --blue-color: var(--footer-blue);

  --primary-rgb: 178, 40, 40;
  --secondary-rgb: 127, 141, 164;

  --default-white: #ffffff;
  --default-black: #000000;

  --title-font-family: "Raleway", sans-serif;
  --body-font-family: "Raleway", sans-serif;
  --script-font: "Parisienne", cursive;

  --heading-color: var(--primary-color);
  --heading-font-family: var(--title-font-family);

  --title-border-bottom: 1px solid var(--secondary-color);

  --home-title-font: var(--title-font-family);

  --transparent: rgba(255, 255, 255, 0);

  --default-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

  --swiper-box-shadow: var(--default-box-shadow);

  --ql-title-color: var(--default-white);

  --site-border-radius: 0;

  --grid-vertical-gap: 1rem;

  --ph-title-color: white;
  --ph-height: calc(var(--ph-width));
  --ph-width: 29vw;

  --hero-title-font-family: var(--body-font-family);

  --h2-font-variant-caps: initial;

  --hero-title-color: white;
  --hero-opacity: 1;

  --h6-text-transform: lowercase;

  /* standard widths and colors */
  --mid-width: 75vw;
  --mid-width-margin-neg: -7vw;

  --mid-width-max-width: 1200px;

  --full-width: 101vw;
  --full-width-margin-neg: -21vw;
  --full-width-margin-neg-mobile: -6vw;
  --full-width-margin-neg-mobile-5vw: -5vw;

  --full-width-max-width: 2000px;

  --main-section-max-width: 900px;

  /* color pallette */
  --red-color: #9d0c02;
  --dark-blue: #2f4450;
  --light-blue: #568194;
  --footer-blue: #002d41;
  --light-green: #a7baaf;
  --orange: #f0842e;
  --button-blue: #1b4e6b;
  --blue-green: #50858d;
  --tan-color: #f2d8b2;
}

.site-1 {
  --small-font: clamp(1rem, 1.2vw, 1.2rem);
  --mid-font: clamp(1.5rem, 1.5vw, 1.75rem);
  --large-font: clamp(1.75rem, 2vw, 2.5rem);
  --super-small-font: 11px;
}

@media (max-width: 50.99rem) {
  .site-1 {
    --mid-width-margin-neg: -5vw;
    --full-width-margin-neg: -5vw;
  }
}

html body p {
  font-size: var(--small-font);
}

body {
  font-size: var(--small-font);
}



/*  */

cite:before {
  display: none;
}

.site-1-sub #g-mainbar {
  position: relative;
}

@media (min-width: 50.99rem) {
  .fancy-menu-toggle {
    position: absolute;
    top: 2rem;
    right: 2rem;
    margin-bottom: 0;
  }
}

/*  */

/* subtitle-hero */

.site-1-sub.subtitle-hero #hero-title-text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: clamp(2rem, 4.5vw, 5rem);
  letter-spacing: 5px;
  line-height: 1.2;
  background-color: rgba(0, 0, 0, 0.35);
  text-align: center;
}

.site-1-sub.subtitle-hero {
  --hero-opacity: 1;
  --hero-img-height-mobile: 50vw;
}

/*  */

/* big-hero */

.site-1-sub.big-hero #hero-title-text {
  color: white;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  font-size: clamp(3rem, 5vw, 6rem);
  letter-spacing: 3px;
  font-weight: 600;
  text-transform: uppercase;
  position: absolute;
  bottom: 20%;
  /* left: 10%; */
  z-index: 2;
}

.site-1-sub.big-hero #hero-grab {
  position: relative;
  /* border-bottom: 10px solid var(--tertiary-color); */
}

.site-1-sub.big-hero #grid-hero {
  /* height: 40vh; */
  min-height: 250px;
  object-fit: cover;
  width: 100%;
}

/* .site-1-sub.big-hero .hero-grow {
  border-bottom: 50px solid var(--tertiary-color);
} */

.site-1-sub.big-hero {
  --hero-opacity: 1;
  --hero-img-height-mobile: 30vh;
  --hero-img-height: 30vw;
}

/* Add a semi-transparent overlay for better text readability */
.site-1-sub.big-hero #hero-grab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 50.99rem) {
  .site-1-sub.big-hero #hero-title-text {
    letter-spacing: 6px;
  }
}

/*  */

.site-1-sub #hero-title-text .subtitle {
  font-size: clamp(1.5rem, 2vw, 3rem);
  letter-spacing: initial;
}

.site-1 .ql-fa-toplinks {
  --ql-title-color: var(--primary-color);
}

.readon,
.button,
.btn,
p.readmore .btn,
.sprocket-lists-portrait-container>li .sprocket-lists-portrait-item>a span,
.listentobutton.moduletable a {
  background: transparent;
  font-family: var(--title-font-family);
  color: var(--primary-color);
  border: 2px solid var(--secondary-color);
  border-radius: 0px;
}

.site-1-home .button {
  font-size: clamp(1rem, 1.15vw, 3rem);
}

.readon:hover,
.button:hover,
.btn:hover,
p.readmore .btn:hover,
.listentobutton .moduletable a:hover {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 0px;
}

/*************** ALL SITE *****************/
.item-image {
  display: none;
}

.newslayout .ph-sidepics-3 .g-item-title {
  color: var(--primary-color);
}

.newslayout .ph-sidepics-3 .g-item-title a {
  color: var(--primary-color);
}

.no-link img,
.no-link a {
  pointer-events: none;
}

:is(.site-1-home, .site-2-home, .site-3-home) #g-page-surround .g-content {
  padding: 0;
  margin: 0;
}

:is(.site-1-home, .site-2-home, .site-3-home) #g-page-surround .g-array-item-text {
  margin: 0;
}

:is(.site-1-sub, .site-2-sub, .site-3-sub) section:not(#g-navigation, #g-container-footer, #g-copyright) .g-content {
  margin: 0 !important;
  padding: 0 !important;
}

:is(.site-1-sub, .site-2-sub, .site-3-sub) section:not(#g-navigation, #g-container-footer, #g-copyright) #grid-addpic .g-content {
  padding: 0 !important;
  margin: 0 !important;
}

:is(.site-1-sub, .site-2-sub, .site-3-sub) section#g-container-main #g-aside .g-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* :is(.site-1-sub, .site-2-sub, .site-3-sub) #g-mainbar {
  padding-top: 2.5%;
  padding-bottom: 2.5%;
} */

.site-1-home h2 {
  font-size: 42px;
  font-weight: 600;
}

.g-content-array .g-array-item-image {
  margin: 0;
}

@media (min-width: 50.99rem) {
  :is(.site-1-home, .site-2-home) #g-top .modern-alert .g-joomla-articles {
    padding: 0 3% !important;
  }
}

.site-1-home .charism-statement .g-array-item-text {
  display: grid;
  gap: 3rem;
}

/***********Custom Scrollbar****************/

/* Hide the default scrollbar */

::-webkit-scrollbar {
  width: 0.75rem;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

/* Style the scrollbar on hover */

::-webkit-scrollbar-thumb:hover {
  background-color: #bbbbbb;
}

/* Style the scrollbar when it's being dragged */

::-webkit-scrollbar-thumb:active {
  background-color: #8c8c8c;
}

@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
  }
}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {
  color: var(--primary-color);
}

.g-offcanvas-toggle .fa-fw {
  text-shadow: none;
}

@media only screen and (max-width: 50.99rem) {
  .site-1 #g-offcanvas .g-social-items {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: center;
  }

  .site-1 #g-offcanvas .g-social-items a {
    color: white;
  }

  .site-1 #g-offcanvas .g-social-items a:hover {
    color: var(--tertiary-color);
  }
}

/*************** TOP **********************/

#g-top.modern-alert-padding {
  background: #f8cea4;
}

.modern-alert .g-content-array>.g-grid {
  border: 3px solid black;
}

.modern-alert .g-array-item :is(h1, h2, h3, h4, h5, h6, p, a) {
  color: black;
}

.modern-alert .g-array-item :is(h1, h2, h3, h4, h5, h6) {
  color: black;
  border-bottom: 2px solid black;
}

/*************** NAVIGATION ***************/

.g-menu-item-container:has(.divider) {
  padding: 0 !important;
  border-right: 2px solid black;
  height: 65%;
  display: grid;
  align-items: center;
}

.rounded-menu .g-toplevel .g-toplevel>li:last-child .g-dropdown {
  border-radius: 1.25rem 0 1.25rem 1.25rem;
}

.rounded-menu .g-toplevel>li:last-child .g-sublevel>li:nth-child(2) {
  border-radius: 1.25rem 0 0 0 !important;
}

.rounded-menu .g-toplevel>.expand-left ul.g-dropdown {
  border-radius: 1.25rem 0 1.25rem 1.25rem !important;
}

.ql-button i {
  margin-right: 0.75rem;
}

@media (max-width: 50.99rem) {
  .mobile-logo img {
    width: 50%;
    display: grid;
    margin: auto;
    padding: 5% 0 0 0;
  }

  .site-1 .ql-button :is(i, span) {
    font-size: 1.5rem;
  }

  .site-1 .button-container {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    margin: 1rem 0;
  }
}

@media (min-width: 50.99rem) {
  .site-1 .g-sublevel li.g-dropdown-column {
    min-width: 300px;
  }

  .site-1 #g-navigation .wide-third-level .g-sublevel .g-dropdown {
    width: 360px;
  }

  .site-1 #g-navigation .g-sublevel .g-menu-item-container {
    padding-left: 10%;
    padding-right: 10%;
  }

  .site-1-sub:has(.sticky) #g-header {
    margin-top: 6vw !important;
  }

  .site-1-home #g-slideshow {
    border-bottom: 35px solid #7e8ca2;
  }

  .site-1 .menu-block .g-toplevel {
    padding-left: 5%;
  }

  .site-1 .button-container {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
  }

  .red-icons>.g-social-items>a:nth-child(1),
  .red-icons>.g-social-items>a:nth-child(2) {
    color: var(--primary-color) !important;
    opacity: 0;
    width: 0;
  }

  .sticky .red-icons>.g-social-items>a:nth-child(1),
  .sticky .red-icons>.g-social-items>a:nth-child(2) {
    opacity: 1;
    width: auto;
  }

  .sticky,
  .sticky .header-logo-block,
  .site-1 .sticky .menu-block,
  .site-1-home .sticky .g-container>.g-grid:nth-child(2),
  .header-logo-block,
  .site-1-home #g-navigation .g-container>.g-grid:nth-child(2),
  .site-1 #g-navigation,
  .site-1 .menu-block {
    transition: all 250ms ease-out;
  }

  .sticky {
    position: fixed !important;
    top: 0;
    height: 5vw !important;
    background-color: white !important;
  }

  .sticky .header-logo-block {
    top: 0;
  }

  .sticky .size-15 {
    flex: 0 12.5%;
    width: 12.5%;
  }

  .site-1 .sticky .menu-block {
    top: 1vw;
  }

  .site-1-home .sticky .g-container>.g-grid:nth-child(2) {
    opacity: 0;
  }

  .site-1 #g-navigation {
    position: relative;
    padding-left: 3% !important;
    max-height: 130px;
    height: 7vw;
    box-shadow: var(--default-box-shadow);
  }

  .site-1-home #g-navigation {
    position: absolute;
    z-index: 10;
  }

  .rounded-menu {
    --menu-hover-color: initial;
  }

  .site-1 .header-logo-block {
    position: absolute;
    top: 1.1vw;
  }

  @media (min-width: 1845px) {
    .site-1 .header-logo-block {
      top: 0.65rem;
      max-width: 275px;
    }

    .menu-block {
      max-width: 1550px;
    }
  }

  #swiper-9861>div {
    max-height: 1200px;
  }

  .site-1 .sticky .header-logo-block {
    position: absolute;
    top: clamp(1px, 1.3vw, 2rem);
  }

  .site-1 #g-navigation .g-container>.g-grid:nth-child(2) {
    position: absolute;
    top: 1vw;
    right: 3.6vw;
    width: fit-content;
  }

  @media (min-width: 1845px) {
    .site-1 #g-navigation .g-container>.g-grid:nth-child(2) {
      top: 0.75rem;
      right: 4rem;
    }

    .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
      font-size: 1.25rem !important;
    }

    .site-1 .ql-button :is(i, span) {
      font-size: 1.25rem !important;
    }

    .site-1 #g-navigation .g-social-items a {
      font-size: 1.25rem !important;
    }
  }

  .site-1 .menu-block {
    position: absolute;
    right: 0;
    top: clamp(1px, 3.25vw, 4.1rem);
    width: 85%;
  }

  .header-logo img {
    position: relative;
    z-index: 11;
  }

  .site-1 .button-container {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
  }

  .ql-button i {
    margin-right: 0.75rem;
  }

  .site-1 .ql-button :is(i, span) {
    font-size: 1vw;
    font-weight: 600;
  }

  .site-1:has(.sticky) #g-page-surround {
    transition: all 400ms ease-out;
  }

  .red-icons>.g-social-items>a:nth-child(1),
  .red-icons>.g-social-items>a:nth-child(2) {
    color: var(--primary-color) !important;
    opacity: 0;
    width: 0;
  }

  .sticky .red-icons>.g-social-items>a:nth-child(1),
  .sticky .red-icons>.g-social-items>a:nth-child(2) {
    opacity: 1;
    width: auto;
  }

  .sticky,
  .sticky .header-logo-block,
  .site-1 .sticky .menu-block,
  .site-1 .sticky .g-container>.g-grid:nth-child(2),
  .header-logo-block,
  .site-1 #g-navigation .g-container>.g-grid:nth-child(2),
  .site-1 #g-navigation,
  .site-1 .menu-block {
    transition: all 250ms ease-out;
  }

  .menu-logo {
    padding: 0.75vw;
  }

  .sticky .menu-logo {
    padding: 0 !important;
  }

  .sticky {
    position: fixed !important;
    top: 0;
    height: 6vw !important;
    background: rgba(255, 255, 255, 1) !important;
  }

  .site-1 .sticky .menu-block {
    top: 1.5vw;
  }

  .site-1 .sticky .g-container>.g-grid:nth-child(2) {
    opacity: 0;
  }
}

@media only screen and (min-width: 50.99rem) {
  .site-1-sub .sticky {
    background-color: white !important;
    z-index: 50;
  }

  .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
    font-size: 1vw;
    font-family: var(--title-font-family);
    font-weight: 600;
  }

  .g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
    font-size: 0.9vw;
    font-family: var(--body-font-family);
  }

  .site-1 #g-navigation .g-social-items {
    display: flex;
    flex-direction: row;
    gap: 2vw;
    align-items: center;
  }

  .site-1 #g-navigation .g-social-items a {
    color: black;
    font-size: 1.5vw;
  }

  .site-1 #g-navigation .g-social-items a:hover {
    color: var(--tertiary-color);
  }

  .site-1 #g-navigation .g-social-items>a:nth-child(1),
  .site-1 #g-navigation .g-social-items>a:nth-child(2) {
    display: none;
  }

  .site-1 #g-navigation.sticky .g-social-items>a:nth-child(1),
  .site-1 #g-navigation.sticky .g-social-items>a:nth-child(2) {
    display: initial;
  }
}

@media only screen and (max-width: 50.99rem) {
  #g-navigation .g-logo {
    max-width: 65%;
    margin: 2rem auto;
  }
}

/*************** SLIDESHOW ****************/

@media (min-width: 50.99rem) {
  .site-1-home #g-slideshow {
    position: relative;
    top: 0;
  }

  .site-1-home :is(.fa-angle-left, .fa-angle-right) {
    text-shadow: var(--default-box-shadow);
  }

  .mission-statement {
    position: absolute;
    z-index: 9;
    bottom: 2%;
  }

  .mission-statement img {
    width: 50%;
    display: grid;
    margin: auto;
  }

  .site-1-home #g-slideshow::after {
    position: absolute;
    content: "";
    bottom: 0;
    width: 100%;
    z-index: 5;
    height: 25%;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 44%,
        rgba(0, 0, 0, 0.87) 82%);
  }
}

@media (max-width: 50.99rem) {
  .site-1-home #g-slideshow {
    position: relative;
    top: 0;
  }

  .mission-statement {
    position: absolute;
    z-index: 9;
    bottom: 3%;
  }

  .mission-statement h2 {
    color: white;
    line-height: 1.3;
    font-size: 1.2rem !important;
  }

  .site-1-home #g-slideshow::after {
    position: absolute;
    content: "";
    bottom: 0;
    width: 100%;
    z-index: 5;
    height: 40%;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6110819327731092) 35%,
        rgba(0, 0, 0, 0.8911939775910365) 85%);
  }

  .site-1-home .mission-statement img {
    width: 80%;
    margin: auto;
    display: grid;
  }
}

/*************** HEADER *******************/

.arrow-button::after {
  content: "";
  display: grid;
  width: 1rem;
  height: auto;
  aspect-ratio: 1.2/1;
  background: url(/images/template/double-arrows-marker-felt-red.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s ease-in;
}

.arrow-button {
  display: flex;
  gap: 1rem;
  width: fit-content;
  margin: auto;
  padding: 0.85vw 1.25rem;
  font-weight: 500;
}

@media (max-width: 50.99rem) {
  .arrow-button {
    padding: 1rem 1.5rem;
  }
}

.arrow-button:hover {
  transform: scale(1.04);
}

.arrow-button p:hover,
.arrow-button:hover {
  background-color: #568194 !important;
  color: white;
  border: 2px solid #568194 !important;
}

.arrow-button:hover::after {
  background: url(/images/template/double-arrows-marker-felt-whites.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.2s ease-in;
}

.arrow-button p,
.arrow-button {
  background-color: var(--button-blue);
  color: white;
  border: 2px solid var(--button-blue);
}

.arrow-button::after {
  background: url(/images/template/double-arrows-marker-felt-whites.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.2s ease-in;
}

/* white arrow button */
.white-arrow-button::after {
  content: "";
  display: grid;
  width: 1.4rem;
  height: auto;
  aspect-ratio: 1.2/1;
  background: url(/images/template/double-arrows-marker-felt-whites.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s ease-in;
}

.white-arrow-button {
  display: flex;
  gap: 1rem;
  width: fit-content;
  margin: auto;
  padding: 1rem 1.5rem;
  font-weight: 500;
}

@media (max-width: 50.99rem) {
  .white-arrow-button {
    padding: 1rem 1.5rem;
  }
}

.news-section:hover .white-arrow-button {
  transform: scale(1.04);
}

.news-section:hover {
  background-size: 105% !important;
  transition: all 300ms ease-in-out;
}

.white-arrow-button p:hover,
.white-arrow-button:hover,
.white-arrow-button:hover a {
  color: var(--tertiary-color);
  background-color: white;
  border: 2px solid var(--tertiary-color);
}

.white-arrow-button:hover {
  transform: scale(1.04);
}

.white-arrow-button:hover::after {
  background: url(/images/template/double-arrows-marker-felt-blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.2s ease-in;
}

.white-arrow-button p,
.white-arrow-button,
.white-arrow-button a {
  color: var(--tertiary-color) !important;
  background-color: white;
  background: white;
  border: 2px solid var(--tertiary-color);
  font-size: clamp(1rem, 1.15vw, 3rem);
  font-weight: 600;
  font-family: var(--title-font-family);
}

.white-arrow-button::after {
  background: url(/images/template/double-arrows-marker-felt-blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.2s ease-in;
}

@media (min-width: 50.99rem) {
  .site-1-home #g-header {
    padding: 5% 20% !important;
  }

  .charism-statement h2 {
    font-size: 42px;
    line-height: 1;
    margin: 0;
    color: var(--primary-color);
  }

  .charism-statement p {
    font-size: 1.2rem;
    margin-bottom: 0;
    line-height: 1.5;
    color: #818181;
  }

  .charism-text {
    display: grid;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  #contentarray-5270-particle>div>div>div>div>div>div>p:nth-child(3) {
    margin-bottom: 0;
  }

  #contentarray-5270-particle>div>div>div>div>div>div>p:nth-child(2) {
    width: 80%;
    margin: auto;
  }
}

@media (max-width: 50.99rem) {
  .charism-statement h2 {
    font-size: 3rem;
    line-height: 1;
    margin: 0;
    color: var(--primary-color);
  }

  .charism-statement p {
    font-size: 1.25rem;
    margin-bottom: 0;
    line-height: 1;
    color: #818181;
  }

  #contentarray-5270-particle>div>div>div>div>div>div>p:nth-child(3) {
    margin-bottom: 0;
  }

  .charism-statement {
    margin: 5% 5%;
  }

  .site-1-home #g-header {
    padding: 10% 7% !important;
  }
}

/*************** ABOVE ********************/

.header-margin :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  line-height: 1;
}

.site-1-home #g-above {
  background: url("/images/stories/template/new-prayer.jpg") 50% 50% no-repeat;
  background-size: 125% auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
}

.site-1-home.tablet-screen #g-above {
  background: url("/images/stories/template/new-prayer.jpg") 50% 50% no-repeat;
  background-size: cover;
  background-attachment: unset !important;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .site-1-home #g-above {
    background-position: 50% 0 !important;
  }
}

@media (max-width: 50.99rem) {
  .site-1-home #g-above {
    background: url("/images/stories/template/new-prayer.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

@media (max-width: 50.99rem) {
  .side-by-side img {
    border-radius: var(--site-border-radius);
    aspect-ratio: 16/12;
  }
}

@media (min-width: 50.99rem) {
  .g-grid:has(> .side-by-side) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .g-grid:has(> .side-by-side)>.g-block {
    width: 100%;
  }

  .side-by-side img {
    border-radius: var(--site-border-radius);
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
  }

  .side-by-side-text {
    padding: 10%;
    display: grid;
    align-items: center;
  }

  .side-by-side-text p {
    margin: 0;
    line-height: 1.5;
    font-size: 1.3rem;
  }

  .side-by-side-text .g-array-item-text {
    display: grid;
    gap: 2rem;
  }

  .side-by-side-text h2 {
    margin: 0;
    line-height: 1;
    font-size: 3.75vw;
  }
}

/*************** SHOWCASE *****************/

.site-1-home #g-showcase {
  background: url("/images/template/background.jpg") 50% 50%;
  background-size: contain;
  background-repeat: repeat;
  background-position: center;
  background-size: 18%;
}

@media (min-width: 50.99rem) {
  :is(.left-image, .right-image) .g-array-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  :is(.left-image, .right-image) .g-array-item-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  .right-image .g-array-item-text {
    padding: 7% 7.5% 7% 20%;
  }

  .left-image .g-array-item-text {
    padding: 7% 20% 7% 7.5%;
  }

  :is(.left-image, .right-image) p {
    margin: 0;
    line-height: 1.5;
    font-size: 1.2rem;
  }

  .right-image .g-array-item-text {
    order: 1;
  }

  .right-image .g-array-item-image {
    order: 2;
  }
}

@media (max-width: 50.99rem) {
  :is(.left-image, .right-image) .g-array-item-text {
    padding: 15% 10%;
  }

  :is(.left-image, .right-image) .g-array-item-text p {
    font-size: 1.25rem;
  }

  :is(.left-image, .right-image) .g-array-item-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  :is(.left-image, .right-image) p {
    margin-bottom: 0;
  }
}

/*************** UTILITY ******************/

.site-1-home #g-utility>.g-container>.g-grid:nth-child(3) :is(h1, h2, h3, h4, h5, h6, p, div, a) {
  color: white;
}

.site-1-home #g-utility>.g-container>.g-grid:nth-child(1) .g-array-item-text {
  background: url("/images/template/background.jpg") 50% 50%;
  background-repeat: repeat;
  background-position: center;
  background-size: 35%;
}

.site-1-home #g-utility>.g-container>.g-grid:nth-child(4) {
  background: url("/images/template/background.jpg") 50% 50%;
  background-size: auto 200%;
  background-repeat: repeat;
  background-position: center;
}

/* Media query for tablet screens (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  body.site-1-home #g-utility .sister-banner {
    background-position: 50% 0 !important;
    background-size: cover !important;
  }
}

.site-1-home #g-utility .sister-banner {
  background: url("/images/template/homepage-banner.jpg") 50% 50% no-repeat;
  background-size: 110% auto !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
}

.sister-banner {
  height: 42vw;
}

.site-1-home.tablet-screen #g-utility .sister-banner {
  background: url("/images/template/homepage-banner.jpg") 50% 50% no-repeat;
  background-size: cover;
  background-attachment: unset !important;
}

@media (max-width: 50.99rem) {
  .site-1-home #g-utility .sister-banner {
    background: url("/images/template/homepage-banner.jpg") 50% 50% no-repeat;
    background-size: cover;
  }

  .vocations-quote cite {
    text-align: right !important;
  }

  .vocations-section div:has(a) {
    margin: auto;
  }

  .vocations-title {
    margin-bottom: 3rem !important;
  }

  .vocations-content {
    margin-bottom: 3rem !important;
  }

  .site-1-home #g-utility>.g-container>.g-grid:nth-child(3) :is(h1, h2, h3, h4, h5, h6, p, div, a) {
    text-align: center;
  }
}

@media (min-width: 50.99rem) {
  .site-1-home #g-utility>.g-container>.g-grid:nth-child(3) {
    padding: 4% 20% 4% 15%;
    background-color: var(--tertiary-color);
  }
}

@media (max-width: 50.99rem) {
  #g-utility>div>div:nth-child(1) {
    flex-direction: column-reverse;
  }

  .site-1-home #g-utility>.g-container>.g-grid:nth-child(3) {
    padding: 10% 5%;
    background-color: var(--tertiary-color);
  }

  .side-by-side-text {
    padding: 5% 10%;
    width: 100%;
  }

  .side-by-side {
    width: 100%;
  }
}

/*************** FEATURE ******************/

.site-1-home #g-feature .g-container {
  width: 100%;
}

.site-1-home #g-feature :is(h1, h2, h3, h4, h5, h6, p, a, div) {
  color: white;
}

@media (min-width: 50.99rem) {
  .site-1-home #g-feature {
    padding: 7.5% 15% !important;
  }
}

@media (max-width: 50.99rem) {
  .site-1-home #g-feature {
    padding: 10% 7% !important;
  }
}

/*************** MAIN *********************/

.site-1-home #g-container-main>div>div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3%;
}

.site-1-home #g-container-main>div>div>div {
  width: 100%;
}

.site-1-home #g-container-main :is(h1, h2, h3, h4, h5, h6, p, a) {
  color: white;
}

.news-section {
  display: grid;
  grid-template-rows: 1fr 3.5fr 1fr 0.5fr;
  gap: 1rem;
  padding: 5% 0 0 0;
  overflow: hidden;
  position: relative;
}

#g-mainbar .news-section a:not(.big-link) {
  background-color: #8d4c22;
}

.big-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#g-aside .news-section a:not(.big-link) {
  background-color: #bd2827;
}

#g-sidebar .news-section a:not(.big-link) {
  background-color: var(--blue-green);
}

#g-mainbar .news-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(141, 76, 34, 0.25);
}

#g-sidebar .news-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(80, 133, 141, 0.25);
}

#g-aside .news-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(189, 40, 39, 0.25);
}

.news-section a {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 2;
  font-size: 1.5vw;
}

.news-section h3 {
  text-align: center;
  z-index: 2;
  padding: 0 5%;
  text-shadow: var(--default-box-shadow);
}

.news-section .arrow-button::after {
  width: 1.5rem;
}

.news-section .text-container {
  display: grid;
  align-items: end;
  justify-content: center;
  z-index: 2;
  padding: 0 10%;
}

.news-section .text-container p {
  text-align: center;
  line-height: 1.75;
}

.news-section .text-container p {
  text-shadow: var(--default-box-shadow);
}

.site-1-home #g-container-main h3 {
  margin: 0 15%;
}

#g-sidebar .news-section {
  background: url(/images/stories/homepage-images/retreats-and-events.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition: all 400ms ease-in-out;
}

#g-sidebar .news-section h3 {
  border-bottom: 7px solid var(--blue-green);
  font-size: 1.8vw;
}

#g-mainbar .news-section h3 {
  border-bottom: 7px solid #8d4c22;
  font-size: 1.8vw;
}

#g-aside .news-section h3 {
  border-bottom: 7px solid #9e140a;
  font-size: 1.8vw;
}

#g-mainbar .news-section {
  background: url(/images/stories/homepage-images/vocation-stories.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition: all 400ms ease-in-out;
}

#g-aside .news-section {
  background: url(/images/stories/homepage-images/videos.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition: all 400ms ease-in-out;
}

@media (min-width: 50.99rem) {
  .site-1-home #g-container-main>div>div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3%;
  }

  .site-1-home #g-container-main {
    padding: 7% 10% 7% 10% !important;
  }

  .site-1-home .news-section:has(.white-arrow-button:hover) {
    background-size: 105%;
  }
}

.g-sublevel .g-menu-item {
  border-bottom: 1px solid black;
}

@media (max-width: 50.99rem) {
  .site-1-home #g-container-main>div>div {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .site-1-home #g-container-main {
    padding: 10%;
  }

  .site-1-home #g-container-main h3 {
    margin: 0 9%;
  }

  .site-1-home #g-mainbar {
    padding: 0;
  }

  .news-section {
    aspect-ratio: 1/1;
  }

  .news-section h3 {
    font-size: 7vw !important;
  }

  .news-section a {
    font-size: 4.75vw;
  }
}

@media only screen and (min-width: 50.99rem) {
  .site-1-sub #g-mainbar {
    min-height: 40rem;
  }
}

@media only screen and (max-width: 50.99rem) {
  :is(.site-1-sub, .site-2-sub) #g-mainbar>.g-grid>.g-block>.g-content {
    margin: 0;
    padding: 0;
  }
}

/*************** EXPANDED *****************/

@media (min-width: 50.99rem) {
  .ph-read-more-hover h2 {
    font-size: 1.5vw;
    color: white;
  }

  .ph-read-more-hover .g-item-title a {
    pointer-events: none;
    text-decoration: none;
  }

  .site-1-home .ardere {
    padding: 3% 5% !important;
  }

  .site-1-home #g-expanded a {
    font-size: 1.3rem;
  }
}

@media (max-width: 50.99rem) {
  .site-1-home .ardere {
    padding: 10%;
  }

  .site-1-home .ardere img {
    width: 90% !important;
  }
}

/*************** EXTENSION ****************/

/*************** SUBPAGES ****************/

.solidyellowback {
  background: rgba(244, 219, 152, 1);
  color: rgba(56, 96, 117) !important;
  padding: 20px 0;
  margin-top: 20px;
  margin-bottom: 20px;
}

.custom-box {
  border: 2px solid rgb(138, 77, 30);
  padding: 20px;
  font-size: 16px;
  width: 600px;
  margin: 20px;
  line-height: 1.5;
}

.subpage-parallax1 {
  background-image: url("/images/stories/parish-pics/foundressbackground.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/

@media (max-width: 50.99rem) {
  .copyright {
    padding-bottom: 1.5rem !important;
  }
}


@media (min-width: 50.99rem) {
  .site-1 .footer-logo {
    display: grid;
    align-items: center;
    border-right: 2px solid rgba(241, 241, 241, 0.5);
  }

  .site-1 .footer-button {
    display: grid;
    justify-content: center;
    align-items: center;
    border-left: 2px solid rgba(241, 241, 241, 0.5);
  }

  .site-1 #g-footer>.g-container>.g-grid:nth-child(1) {
    padding: 3% 7%;
  }

  .site-1 .copyright-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2%;
  }

  .site-1 .footer-middle-section {
    display: grid;
    align-items: center;
  }
}

@media (max-width: 50.99rem) {
  .footer-logo {
    padding: 10% 10% 1% 10%;
  }

  .footer-container {
    padding: 5%;
  }

  .social-icon {
    width: 10.75vw !important;
  }

  .donate-button {
    display: flex;
    justify-content: center;
    padding-bottom: 10%;
  }

  .navigation-footer {
    padding: 3% 0;
  }

  .navigation-footer a {
    font-size: 3.5vw !important;
  }

  .site-1 .web-policy {
    height: 0;
    position: absolute;
    bottom: 0.75rem;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .site-1 .adminfootericon {
    bottom: 80px !important;
  }

  .copyright-banner p {
    text-align: center !important;
    font-size: 1rem;
    line-height: 1.5;
  }

  .copyright {
    padding: 0;
    padding-bottom: 0.75rem;
  }
}

.copyright {
  background-color: #494949;
}

@media (min-width: 50.99rem) {
  .copyright {
    padding: 1rem 0;
  }
}

.site-1 #g-footer p {
  margin: 0;
}

.site-1 #g-footer .g-social-items a span {
  font-size: 2rem;
}

#g-footer .g-content-array {
  margin: 0;
}

#g-footer a {
  color: var(--default-white);
}

/*************** COPYRIGHT ****************/
@media only screen and (max-width: 50.99rem) {
  .web-policy {
    justify-content: flex-end;
    padding-right: 10px;
  }

  .site-2 .adminfootericon {
    bottom: 40px;
  }
}

.copyright p {
  font-size: clamp(1rem, 0.95vw, 1.25rem);
}

/*************** MODULES ******************/
.moduletable .nav.menu,
.moduletable .unstyled {
  background: var(--primary-color);
}

.moduletable .nav.menu li.current.active a,
.moduletable .nav.menu li a:hover {
  color: var(--default-white);
  background: var(--secondary-color);
}

/*************** SECTIONS *****************/
/*************** MOBILE *******************/

.g-offcanvas-toggle {
  background: var(--default-white);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

/*************** ADS **********************/

@media only screen and (min-width: 50.99rem) {
  #site-grid #g-container-main {
    padding-bottom: 3vw;
  }
}

@media only screen and (max-width: 50.99rem) {
  .grid.ph-sidebyside-mobile .g-array-item-read-more {
    opacity: 0;
  }

  .grid.ph-sidebyside-mobile .g-array-item-title {
    padding: 1rem;
  }
}

@media only screen and (min-width: 50.99rem) {
  .search-page button.btn {
    background: var(--primary-color) !important;
  }

  .search-page button.btn:hover {
    background: var(--secondary-color) !important;
  }
}

@media only screen and (max-width: 50.99rem) {
  .search-page button.btn {
    background: var(--primary-color) !important;
  }

  .search-page button.btn:hover {
    background: var(--secondary-color) !important;
  }
}

@media only screen and (max-width: 50.99rem) {
  .ph-sidebyside-mobile .g-array-item-read-more {
    opacity: 0;
  }

  .ph-sidebyside-mobile .g-array-item-title {
    padding: 1rem;
  }
}

@media only screen and (min-width: 50.99rem) {
  .bilingual {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2vw;
  }

  .bilingual .englishtext {
    flex: 1;
  }

  .bilingual .spanishtext {
    flex: 1;
    font-style: italic;
    margin-right: -1rem;
  }
}

@media only screen and (max-width: 50.99rem) {
  .bilingual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .bilingual .englishtext {
    flex: 1;
  }

  .bilingual .spanishtext {
    flex: 1;
    font-style: italic;
  }
}

.g-offcanvas-toggle {
  background: var(--default-white);
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--primary-color);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.g-offcanvas-toggle .fa-fw {
  text-shadow: initial !important;
}

/* Image Paths for Particle Template */
/* All images used in the particle template need to be updated here */

@media (min-width: 50.99rem) {
  .style-201 .g-container:has([class*="-201"]) {
    background-image: url("/images/template/header-church-transparent-background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .style-202 .g-container:has([class*="-202"]) {
    background-image: url("/images/template/header-church-transparent-background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .style-301 .mass-times-301 {
    background: url("/images/template/masstimes.jpg") 0% no-repeat;
    background-size: cover;
    background-position: center;
  }

  .style-303 .mass-times-303 {
    background: url("/images/template/masstimes.jpg") 0% no-repeat;
    background-size: cover;
    background-position: center;
  }

  .style-304 .mass-times-304 {
    background: url("/images/template/masstimes.jpg") 0% no-repeat;
    background-size: cover;
    background-position: center;
  }

  .style-305 .mass-times-305 {
    background: url("/images/template/masstimes.jpg") 0% no-repeat;
    background-size: cover;
    background-position: center;
  }

  .style-1001 :is(#g-navigation,
    #g-slideshow,
    #g-header,
    #g-above,
    #g-feature,
    #g-showcase,
    #g-utility,
    #g-container-main,
    #g-expanded,
    #g-extension,
    #g-bottom,
    #g-footer,
    #g-copyright):has([class*="-1001"]) {
    background: url("/images/template/parallax1.jpg") 50% 50% no-repeat;
  }

  .mockup-ads.particle-template .g-block:has(div.adside) .adside {
    background-image: url("/images/template/side-ads.png");
  }

  .mockup-ads.particle-template .adhorizontal {
    background-image: url("/images/template/horizontal-ads.png");
  }
}

@media (max-width: 50.99rem) {
  .mockup-ads.particle-template .g-block:has(div.adside) .adside {
    background-image: url("/images/template/side-ads.png");
  }

  .mockup-ads.particle-template .adhorizontal {
    background-image: url("/images/template/horizontal-ads-mobile.png");
  }
}

.logo {
  width: 150px;
  /* Adjust this size as needed */
  margin-bottom: 20px;
}

.navigation-footer a {
  color: white;
  margin: 0 15px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
}

.social-icons {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}

.social-icon {
  color: white;
  font-size: 1em;
  text-decoration: none;
  display: inline-block;
  aspect-ratio: 1/1;
  width: 2.75vw;
  max-width: 75px;
}

.footer-container {
  text-align: center;
}

.donate-button {
  margin-top: 20px;
}

.donate {
  background-color: #d84f2b;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.2rem 3.5rem;
  font-size: 1.2em;
  display: inline-block;
  transition: all 300ms ease-in-out;
}

.site-1 .footer-container a:hover {
  opacity: 0.75;
}

.donate:hover {
  transform: scale(1.05);
  transition: all 300ms ease-in-out;
}

@media (min-width: 50.99rem) {
  .web-policy {
    bottom: 65px;
  }

  .adminfootericon {
    bottom: 85px;
  }
}

/* Template Styles */

/* Image Gallery Styles */
.gallery-container {
  width: 100%;
  overflow: hidden;
}

.image-row {
  display: flex;
  width: 100%;
  gap: 1rem;
  justify-content: space-between;
  max-width: var(--mid-width-max-width);
  margin: auto;
}

.founding-page-2 .gallery-container .image-container {
  aspect-ratio: 1/1.25;
}

/* Desktop view - three images in a row with gaps */
@media (min-width: 768px) {
  .image-container {
    width: 100%;
    height: auto;
    padding-bottom: calc((100% - 40px) / 3);
    position: relative;
    aspect-ratio: 1/1.2;
  }
}

.site-1-sub #g-mainbar ul:not(:is(.menu, .nav-child)) ul {
  list-style-type: none;
  /* Remove default bullets */
  padding-left: 0;
  /* Remove default padding */
}

.site-1-sub #g-mainbar ul:not(:is(.menu, .nav-child)) li {
  padding-left: 1.2em;
  /* Add padding to make space for the custom marker */
  position: relative;
  /* Required for absolute positioning of the pseudo-element */
}

.site-1-sub #g-mainbar ul:not(:is(.menu, .nav-child)) li::before {
  content: "✚";
  /* Your custom marker */
  position: absolute;
  left: 0;
  top: 0;
  /* Adjust as needed for vertical alignment */
  font-size: 0.75rem;
  top: 0.75em;
}

.site-1-sub .fancy-menu .fancy-menu-item {
  margin: 0 !important;
}

/* Mobile view - one image at a time with scroll snapping and overhang */
@media (max-width: 767px) {
  .gallery-container {
    padding: 0;
    /* Remove container padding on mobile */
  }

  .image-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 15px;
    /* Add padding inside the scrollable area */
    margin: 0 -15px;
    /* Negative margin to allow overflow on sides */
    gap: 15px;
    /* Smaller gap for mobile */
  }

  .image-container {
    min-width: 85%;
    /* Make images take up most but not all of the screen */
    height: 0;
    padding-bottom: 85%;
    /* Keep the image square */
    position: relative;
    scroll-snap-align: center;
    /* Snap to center instead of start */
  }

  /* First and last items need extra spacing to account for the overhang */
  .image-container:first-child {
    margin-left: 0;
  }

  .image-container:last-child {
    margin-right: 15px;
  }

  /* Hide scrollbar */
  .image-row::-webkit-scrollbar {
    display: none;
  }

  .image-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left: 13vw;
    width: 103vw;
  }

  .gallery-container {
    width: var(--full-width);
    margin-left: -5vw;
  }
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*  */

/* Quote Card Styles */
.quote-container {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  padding: 3rem 2rem;
  background-color: var(--tan-color);
  /* Golden background color */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quote-content {
  max-width: var(--mid-width-max-width);
  text-align: center;
}

.quote-content p {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: #31516b;
  /* Dark blue/teal color as in the image */
  margin-bottom: 30px;
}

.quote-attribution {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #31516b;
  font-style: italic;
  text-align: center;
  margin-top: 10px;
}

/* Empty p tag at the end */
.quote-container>p:last-child {
  margin: 0;
  padding: 0;
  height: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .quote-container {
    padding: 30px 15px;
  }

  .quote-content p {
    font-size: 16px;
    line-height: 1.5;
  }

  .quote-attribution {
    font-size: 14px;
  }
}

/*  */

/* Two Image Gallery Styles with New Classes */
.duo-gallery {
  width: 100%;
  overflow: hidden;
  padding: 0 15px;
}

.duo-wrapper {
  display: flex;
  width: 100%;
  gap: 20px;
}

/* Desktop view - two images in a row with gap */
@media (min-width: 768px) {
  .duo-item {
    width: calc((100% - 20px) / 2);
    /* Account for the one gap (20px) */
    height: 0;
    padding-bottom: calc((100% - 20px) / 2);
    /* Keep it square */
    position: relative;
  }
}

/* Mobile view - one image at a time with scroll snapping and overhang */
@media (max-width: 767px) {
  .duo-gallery {
    padding: 0;
  }

  .duo-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 15px;
    margin: 0 -15px;
    gap: 15px;
  }

  .duo-item {
    min-width: 85%;
    height: 0;
    padding-bottom: 85%;
    position: relative;
    scroll-snap-align: center;
  }

  /* First and last items need extra spacing to account for the overhang */
  .duo-item:first-child {
    margin-left: 0;
  }

  .duo-item:last-child {
    margin-right: 15px;
  }

  /* Hide scrollbar */
  .duo-wrapper::-webkit-scrollbar {
    display: none;
  }

  .duo-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.duo-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.duo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 50-50 template */

.c-content-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.c-text-block,
.c-image-block {
  flex: 1;
  padding: 2rem;
}

.contact-us-page .c-text-block,
.contact-us-page .c-image-block {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.contact-us-page .c-content-section {
  align-items: flex-start;
}

.c-content-section img {
  border-radius: 50%;
}

@media (min-width: 50.99rem) {
  .c-content-section {
    width: var(--mid-width);
    max-width: var(--mid-width-max-width);
    margin: auto;
    margin-left: var(--mid-width-margin-neg);
  }
}

/* Mobile view */
@media (max-width: 50.99rem) {
  .c-content-section {
    flex-direction: column;
  }

  .c-content-section img {
    max-width: 60%;
    margin: auto;
    display: grid;
  }
}

/*  */

.big-padding-section {
  padding: 5% 0;
  display: grid;
  justify-content: center;
  align-items: center;
  max-width: var(--main-section-max-width);
  margin: auto;
  font-size: var(--small-font);
}

.big-padding-section :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.3;
}

/*  */

.ardere-section {
  width: 100%;
  padding: 2.5% 0;
}

.ardere-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.ardere-title {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: clamp(3rem, 5vw, 7rem);
  font-family: var(--body-font-family);
  font-style: italic;
}

.ardere-subtitle {
  color: var(--primary-color);
  font-size: clamp(1.2rem, 1.5vw, 3rem);
}

/*  */

.partner-section {
  background-color: #2e4053;
  color: white;
  padding: 5%;
  width: 100%;
  position: relative;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

.contact-us-page .partner-section {
  background-color: var(--blue-green);
}

@media (max-width: 50.99rem) {
  .partner-section {
    margin-left: var(--full-width-margin-neg-mobile);
    padding: 10%;
    width: var(--full-width);
  }
}

.partner-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
}

.partner-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 300px;
  align-items: center;
  gap: 1rem;
}

.partner-heading {
  margin-bottom: 20px;
  font-weight: normal;
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0.5rem;
  border-bottom: none;
}

.partner-button {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  /* margin-bottom: 10px; */
  border: 1px solid white;
  transition: all 0.3s ease;
  font-size: 16px;
  text-align: center;
  min-width: 200px;
}

.primary-button {
  color: white;
  background-color: transparent;
  font-size: clamp(1rem, 1.15vw, 3rem);
  font-weight: 600;
  font-family: var(--title-font-family);
}

.primary-button:hover {
  color: white;
}

.secondary-button {
  color: #2e4053;
  background-color: white;
  font-size: clamp(1rem, 1.15vw, 3rem);
  font-weight: 600;
  font-family: var(--title-font-family);
}

.partner-section .arrow-button {
  color: white;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: clamp(1rem, 1.15vw, 3rem);
  font-weight: 600;
  font-family: var(--title-font-family);
}

.partner-button:hover {
  opacity: 0.9;
}

@media (max-width: 50.99rem) {
  .partner-container {
    flex-direction: column;
    align-items: center;
  }

  .partner-column {
    align-items: center;
    width: 100%;
  }
}

.partner-section .arrow-button::after {
  color: white;
  display: none;
}

.partner-section .arrow-button:hover {
  color: white;
}

.partner-button:hover {
  transform: scale(1.05);
}

/*  */

.site-1-home :is(.left-image, .right-image) img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 50.99rem) {

  .site-1-home :is(.left-image, .right-image) img {
    max-height: 60vw;
  }

  .side-by-side-images {
    height: initial !important;
  }

}

#logo-8800-particle {
  height: 45vw;
  max-height: 1600px;
  visibility: hidden;
  overflow: hidden;
}

.site-1-home .button {
  font-family: var(--title-font-family);
  font-weight: 600;
}

@media (max-width: 50.99rem) {
  #logo-8800-particle {
    height: 30vh;
    max-height: 1600px;
    overflow: hidden;
    visibility: hidden;
  }
}

.vocations-section {
  color: white;
  width: 100%;
}

.vocations-container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;
}

.vocations-content {
  max-width: 70%;
}

.vocations-title {
  margin-bottom: 15px;
  font-weight: normal;
}

.vocations-quote {
  font-style: italic;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  border: none;
  color: white;
  font-size: 1.2rem;
  margin-top: 1rem;
  font-family: var(--body-font-family);
  letter-spacing: 2px;
}

.vocations-quote cite {
  display: block;
  margin-top: 5px;
  text-align: left;
  color: white;
  font-size: var(--super-small-font);
  font-style: normal;
  letter-spacing: 1px;
  margin-top: 1rem;
}

.vocations-action {
  display: flex;
  align-items: center;
}

.vocations-button {
  display: inline-block;
  color: white;
  background-color: transparent;
  border: 1px solid white;
  text-decoration: none;
  padding: 10px 20px;
  transition: all 0.3s ease;
  text-align: center;
}

.vocations-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Secondary header styling */
.vocations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.header-title {
  margin: 0;
}

.header-button {
  display: inline-block;
  background-color: transparent;
  text-decoration: none;
  padding: 8px 16px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.header-button:hover {
  color: white;
}

@media (max-width: 50.99rem) {
  .vocations-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .vocations-content {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .vocations-action {
    width: 100%;
    justify-content: flex-start;
  }

  .vocations-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-title {
    margin-bottom: 15px;
  }
}

.ardere-section {
  padding: 5% 0%;
}

.site-1-sub .white-arrow-button {
  color: white;
}

.news-hero #hero-title-text {
  left: 50% !important;
  transform: translate(-50%, 0);
}

/* image hover effects */

:is(.left-image, .right-image) img:hover {
  transform: scale(1.05);
  transition: transform 1.5s ease;
}

:is(.left-image, .right-image) img {
  transition: transform 1.5s ease;
}

:is(.left-image, .right-image) img:hover {
  transform: scale(1.05);
}

:is(.left-image, .right-image) .g-array-item-image {
  overflow: hidden;
}

/* menu logo switch */

#g-navigation .menu-logo img {
  opacity: 1;
  width: 100%;
  /* adjust this to your desired initial width */
  visibility: visible;
  transition: all 0.5s ease-in-out;
  /* using 'all' to catch both opacity and width */
}

/* Hero title modifications */

/* Hero Title Styling */
#hero {
  position: relative;
}

#hero .hero-title-design {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: 5rem;
  gap: 0;
  font-weight: 600;
  letter-spacing: 2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 10;
  width: 100%;
  text-transform: capitalize !important;
}

#hero .hero-title-design span {
  display: block;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Bottom Border */
.blue-border #hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: var(--tertiary-color);
  z-index: 11;
}

#hero.hero-grow {
  --hero-img-height: 30vw;
  --hero-img-height-mobile: 50vw;
}

/* Media Queries */
/* Large tablets */
@media screen and (max-width: 1200px) {
  #hero .hero-title-design {
    font-size: 3rem;
  }

  #hero .hero-title-design span {
    font-size: 1.8rem;
  }
}

/* Medium tablets */
@media screen and (max-width: 992px) {
  #hero .hero-title-design {
    font-size: 2.5rem;
  }

  #hero .hero-title-design span {
    font-size: 1.5rem;
  }
}

/* Small tablets and large phones */
@media screen and (max-width: 50.99rem) {
  #hero .hero-title-design {
    font-size: 2rem;
  }

  #hero .hero-title-design span {
    font-size: 1.3rem;
    margin-top: 0.3rem;
  }

  #hero::after {
    height: 4px;
  }
}

/* Mobile phones */
@media screen and (max-width: 576px) {
  #hero .hero-title-design {
    font-size: 1.7rem;
    letter-spacing: 1px;
  }

  #hero .hero-title-design span {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
  }

  #hero::after {
    height: 3px;
  }
}

/* Extra small devices */
@media screen and (max-width: 375px) {
  #hero .hero-title-design {
    font-size: 1.5rem;
  }

  #hero .hero-title-design span {
    font-size: 1rem;
  }
}

/*  */

/* Hero Section Styling for pages with subtitle-hero class */

/* Hero Title Styling */
.subtitle-hero #hero {
  position: relative;
}

.subtitle-hero #hero .hero-title-design {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: 5rem;
  gap: 0;
  font-weight: 600;
  letter-spacing: 2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 10;
  width: 100%;
  padding: 0 20px;
}

.subtitle-hero #hero .hero-title-design span {
  display: block;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Bottom Border */
#hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background-color: #7e8ca2;
  z-index: 11;
}

.subtitle-hero #hero.hero-grow {
  --hero-img-height: 30vw;
}

/* Media Queries */
/* Large tablets */
@media screen and (max-width: 1200px) {
  .subtitle-hero #hero .hero-title-design {
    font-size: 3rem;
  }

  .subtitle-hero #hero .hero-title-design span {
    font-size: 1.8rem;
  }
}

/* Medium tablets */
@media screen and (max-width: 992px) {
  .subtitle-hero #hero .hero-title-design {
    font-size: 2.5rem;
  }

  .subtitle-hero #hero .hero-title-design span {
    font-size: 1.5rem;
  }
}

/* Small tablets and large phones */
@media screen and (max-width: 50.99rem) {
  .subtitle-hero #hero .hero-title-design {
    font-size: 2.5rem;
  }

  .subtitle-hero #hero .hero-title-design span {
    font-size: 1.3rem;
    margin-top: 0.3rem;
  }

  .subtitle-hero #hero::after {
    height: 20px;
  }
}

/* Mobile phones */
@media screen and (max-width: 576px) {
  .subtitle-hero #hero .hero-title-design {
    font-size: var(--mid-font);
    letter-spacing: 1px;
  }

  .subtitle-hero #hero .hero-title-design span {
    font-size: var(--small-font);
    letter-spacing: 0.5px;
  }

  .subtitle-hero #hero::after {
    height: 3px;
  }
}

/* Extra small devices */
@media screen and (max-width: 375px) {
  .subtitle-hero #hero .hero-title-design {
    font-size: 1.5rem;
  }

  .subtitle-hero #hero .hero-title-design span {
    font-size: var(--small-font);
  }
}

/*  */

.site-1-sub #g-mainbar .menu-container:has(.menu-toggle-button) {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  width: fit-content;
}

/* quote paralax */

/* Paralax quote section styles */
.c-quote-paralax {
  position: relative;
  background-image: url("/images/stories/auto-extract/Our_Foundress_4_resized.jpg?1744392244");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
  color: white;
  text-align: left;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-quote-paralax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 45 65 / 85%);
  z-index: 1;
}

.c-quote-container {
  /* max-width: 1200px; */
  margin: 0 auto;
  /* padding: 0 20px; */
  position: relative;
  z-index: 2;
}

.c-quote-text {
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: 30px;
  font-weight: 400;
}

.c-quote-author {
  font-size: 18px;
  color: #e6b85c;
  font-weight: 500;
}

/* Media queries for responsive design */
@media (max-width: 50.99rem) {
  .c-quote-paralax {
    background-attachment: scroll;
    /* Disable paralax on mobile */
    padding: 80px 0;
    min-height: auto;
  }

  .c-quote-text {
    font-size: 20px;
  }

  .c-quote-author {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .c-quote-text {
    font-size: 18px;
  }

  .c-quote-container {
    padding: 0 15px;
  }
}

/*  */

/* History Timeline Section Styles */
.c-history-timeline {
  padding: 5rem 0;
  background-color: #ffffff;
  /* border-bottom: 1px solid #eaeaea; */
}

.c-history-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.c-history-images {
  flex: 1;
  min-width: 300px;
  display: grid;
}

.c-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  margin: auto !important;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/0.75;
}

.c-image-item {
  overflow: hidden;
}

.c-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.c-image-square {
  position: relative;
  width: 100%;
  padding-top: 100%;
  /* Creates a 1:1 aspect ratio */
  overflow: hidden;
}

.c-history-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* This crops the image to fill the container */
  display: block;
}

.c-history-content {
  flex: 1;
  min-width: 300px;
  border: 3px solid var(--blue-green);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.c-history-content>div>p:last-child {
  margin: 0;
}

@media (min-width: 50.99rem) {
  .c-history-timeline {
    width: var(--mid-width);
    margin-left: var(--mid-width-margin-neg);
  }
}

@media (max-width: 50.99rem) {
  .c-history-timeline {
    padding: 5% 0;
  }
}

.c-history-text {
  font-size: 16px;
  height: 100%;
  align-items: center;
  display: grid;
}

.c-history-text p {
  margin: 0;
  line-height: 1.75;
}

/* Media queries for responsive design */
@media (max-width: 992px) {
  .c-history-container {
    flex-direction: column;
  }

  .c-history-images {
    max-width: 100%;
  }

  .c-history-content {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .c-history-timeline {
    padding: 20px 0;
  }

  .c-history-container {
    padding: 0 15px;
    gap: 20px;
  }

  .c-history-content {
    padding: 20px;
  }

  .c-year-label {
    font-size: 16px;
    padding: 6px 12px;
  }

  .c-history-text {
    font-size: 14px;
  }
}

/*  */

.foundress-page .c-image-block {
  border: 3px solid var(--blue-green);
}

.foundress-page .c-image-block p:last-child {
  margin: 0;
}

.foundress-page .c-image-block :is(h1, h2, h3, h4, h5, h6),
.c-year-label {
  color: white;
  background-color: var(--blue-green);
  width: fit-content;
  padding: 0.5rem 2rem;
  border-bottom: none;
  margin-bottom: 1rem;
  font-size: var(--mid-font);
}

.gallery-container .image-row>.image-container:first-child {
  aspect-ratio: 1.3/1.2;
}

.gallery-container .image-row>.image-container:nth-child(2) {
  aspect-ratio: 1.2/1.2;
}

.gallery-container .image-row>.image-container:nth-child(3) {
  aspect-ratio: 1.1/1.2;
}

.image-row {
  gap: 0.5rem;
}

.c-quote-paralax {
  position: relative;
  width: var(--full-width);
  left: var(--full-width-margin-neg);
}

@media (min-width: 50.99rem) {
  section:has(> .gallery-container) {
    width: var(--mid-width);
    margin-left: var(--mid-width-margin-neg);
  }

  .c-quote-paralax {
    padding: 15% 5rem;
  }
}

@media (max-width: 50.99rem) {
  .c-quote-paralax {
    position: relative;
    width: var(--full-width);
    left: var(--full-width-margin-neg);
  }

  .c-quote-paralax {
    padding: 7% 10%;
  }
}

/* founding-page-2 */

.founding-page-2 .c-history-content {
  border: none;
}

.founding-page-2 .c-quote-text p {
  margin-bottom: 0;
  line-height: 1.5;
  font-style: normal;
}

.founding-page-2 .c-quote-text p:first-child {
  margin-bottom: 2rem;
}

.founding-page-2 .c-quote-text {
  margin-bottom: 0;
  font-style: normal;
}

.founding-page-2 .c-quote-text p {
  color: white;
  font-size: var(--small-font);
}

.founding-page-2 .c-quote-paralax {
  background-image: url("/images/stories/auto-extract/IMG_7999-1140x642_resized.jpg?1744394921");
}

/*  */

/* Historical Room Section Styles */
.c-historical-room {
  padding: 0;
  background-color: #f9ecd9;
  width: 100%;
  overflow: hidden;
  width: var(--full-width);
  left: var(--full-width-margin-neg);
  position: relative;
}

.c-historical-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* max-width: 1400px; */
  /* margin: 0 auto; */
}

.c-historical-image {
  flex: 1;
  min-width: 300px;
  overflow: hidden;
}

.c-historical-image img {
  object-fit: cover;
  height: 100%;
}

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

.c-historical-content {
  flex: 1;
  min-width: 300px;
  background-color: #f2d8b2;
  padding: 5% 10% 5% 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-historical-text {
  font-size: 16px;
  line-height: 1.6;
}

.c-historical-text p {
  margin: 0;
  line-height: 2;
  color: rgb(0 45 65 / 100%);
}

/* Media queries for responsive design */
@media (max-width: 992px) {
  .c-historical-container {
    flex-direction: column;
  }

  .c-historical-image,
  .c-historical-content {
    width: 100%;
  }

  .c-historical-image {
    height: 300px;
  }
}

@media (max-width: 576px) {
  .c-historical-content {
    padding: 20px 15px;
  }

  .c-historical-text {
    font-size: 14px;
  }
}

/*  */

/* Menu toggle button */
.fancy-menu-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  z-index: 11;
  margin-bottom: 2.5rem;
}

/* Menu styling */
.fancy-menu {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: fit-content;
  max-width: 75vw;
  min-width: 400px;
  height: auto;
  background-color: white;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 20px;
  /* box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); */
  display: block;
  /* Ensure it's always displayed */
}

/* Initial hidden state */
.fancy-menu-initial {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fancy-menu--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Close button - positioned above the menu */
.fancy-menu-close {
  position: absolute;
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Overlay */
.fancy-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fancy-menu-overlay--active {
  opacity: 1;
  visibility: visible;
}

/* Menu item animations - fade and slide */
.fancy-menu-item {
  opacity: 0;
  transform: translateY(-20px);
  /* Start slightly above */
  transition: opacity 1s ease-out, transform 1s ease-out;
  /* Smooth, shorter duration with ease-out */
}

.fancy-menu-item--active {
  opacity: 1;
  transform: translateY(0);
  /* Slide to original position */
}

/* Show only on desktop */
@media (min-width: 50.99rem) {
  .fancy-menu-toggle {
    display: flex;
  }
}

/* Jeremy's menu css */
.fancy-menu .mod-list>li:last-child {
  margin-bottom: 0 !important;
}

.fancy-menu .moduletable .nav.menu,
.moduletable .unstyled {
  background-color: transparent;
}

.fancy-menu .mod-list li {
  background-color: white;
  border-radius: 0 !important;
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
}

.fancy-menu {
  background-color: transparent;
}

.fancy-menu .mod-list {
  background: transparent !important;
}

.fancy-menu a {
  font-size: 1.5rem;
  padding: 10px 20px !important;
  text-align: center;
  color: black !important;
}

.fancy-menu-item:has(ul) {
  background: transparent !important;
}

.fancy-menu-toggle svg {
  color: var(--primary-color);
}

.fancy-menu .nav.menu li a:hover {
  background-color: var(--secondary-color);
  color: white !important;
}

.fancy-menu li.active a {
  color: white !important;
  background-color: var(--secondary-color);
}

.fancy-menu .nav-child li {
  background: white !important;
}

.fancy-menu .nav-child li a {
  color: black !important;
  background-color: white !important;
}

.fancy-menu .nav-child li a:hover {
  background-color: var(--secondary-color);
  background: var(--secondary-color) !important;
}

@media (min-width: 50.99rem) {
  .section-horizontal-paddings-small {
    padding: 0 20%;
  }
}

@media (min-width: 50.99rem) {
  /* section > .gallery-container {
    width: 90vw;
    position: relative;
    margin-left: -25%;
  } */
}

/*  banner section */

.banner-image {
  width: var(--full-width);
  position: relative;
  overflow: hidden;
  height: 700px;
}

.banner-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 50.99rem) {
  .banner-image {
    margin-left: var(--full-width-margin-neg);
  }
}

@media (max-width: 50.99rem) {
  .banner-image {
    margin-left: var(--full-width-margin-neg-mobile-5vw);
    height: 400px;
  }
}

/* blue banner section */

.blue-banner-section h1 {
  color: white;
  font-size: clamp(1.75rem, 2.5vw, 4rem);
  margin: 0;
  position: relative;
  z-index: 10;
}

.blue-banner-section {
  background-color: var(--blue-color);
}

.blue-banner-section div {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.blue-banner-section cite {
  color: #cd9356;
  font-size: 1.3rem;
  font-weight: bold;
  /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); */
  letter-spacing: 1px;
}

.blue-banner-section cite:before {
  content: "" !important;
  visibility: hidden;
  display: none;
}

@media (min-width: 50.99rem) {
  .blue-banner-section {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg);
    padding: 5rem 25%;
  }
}

@media (max-width: 50.99rem) {
  .blue-banner-section {
    width: var(--full-width);
    margin-left: -6vw;
    padding: 10%;
  }

  .blue-banner-section div {
    padding: 5% 10%;
  }
}

/*  */

.vocation-stories-grid {
  position: relative;
}

.vocation-stories-grid .g-array-item {
  position: relative;
}

.vocation-stories-grid .g-array-item-title {
  position: absolute;
  bottom: 25%;
  left: 0;
  right: 0;
  color: white;
  padding: 10px;
  text-align: center;
  width: fit-content;
  margin: auto;
}

@media (min-width: 50.99rem) {
  .grid-articles .g-content-array>.g-grid {
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 50%;
    width: 50%;
    max-width: 50%;
    position: relative;
    transition: var(--grid-transition);
  }
}

/* vocaitons inqure */

.c-vocations-inquiry {
  background-color: #2e424d;
  color: white;
  text-align: center;
}

.c-vocations-inquiry__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.c-vocations-inquiry__content {
  text-align: left;
  flex: 1;
}

.c-vocations-inquiry__title {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: normal;
  color: white;
  text-align: left;
}

.c-vocations-inquiry__quote {
  font-style: italic;
  margin-top: 1rem;
  text-align: left;
}

.c-vocations-inquiry__quote p {
  margin: 0;
  font-size: var(--mid-font);
}

.c-vocations-inquiry__author {
  display: block;
  color: #e4a052;
  font-style: normal;
  margin-top: 0.5rem;
  font-size: var(--small-font);
}

.c-vocations-inquiry__buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.c-vocations-inquiry__button {
  display: block;
  padding: 15px 35px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  transition: background-color 0.3s ease;
  min-width: 250px;
}

.c-vocations-inquiry__button--primary {
  background-color: white;
  color: #4f7a8f;
  transition: transform 0.3s ease;
}

.c-vocations-inquiry__button--primary:hover {
  background-color: white;
  color: var(--secondary-color);
  transition: transform 0.3s ease;
  transform: scale(1.05);
}

.c-vocations-inquiry__button--secondary {
  background-color: var(--secondary-color);
  color: white;
  transition: transform 0.3s ease;
}

.c-vocations-inquiry__button--secondary:hover {
  background-color: var(--secondary-color);
  color: white;
  transition: transform 0.3s ease;
  transform: scale(1.05);
}

@media (max-width: 50.99rem) {
  .c-vocations-inquiry__container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .c-vocations-inquiry__content {
    text-align: center;
  }

  .c-vocations-inquiry {
    padding: 5% 10%;
    width: var(--full-width);
    margin-left: -6vw;
  }
}

@media (min-width: 768px) {
  .c-vocations-inquiry {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg);
  }

  .c-vocations-inquiry__content {
    text-align: center;
  }

  .c-vocations-inquiry {
    padding: 5rem 2rem;
  }

  .c-vocations-inquiry__container {
    max-width: var(--mid-width-max-width);
    margin: auto;
  }
}

/* green image section */

.c-discernment-retreats {
  background-color: #a7baaf;
  color: #1a3332;
  padding: 0;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

.c-discernment-retreats__container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: var(--mid-width-max-width);
  margin: 0 auto;
}

.c-discernment-retreats__content {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-discernment-retreats__content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
  color: white;
}

.c-discernment-retreats__link {
  color: #1a3332;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.c-discernment-retreats__link:hover {
  text-decoration: underline;
}

.c-discernment-retreats__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

.c-discernment-retreats__image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 50.99rem) {
  .c-discernment-retreats__container {
    flex-direction: column;
  }

  .c-discernment-retreats__content {
    padding: 30px 20px;
  }

  .c-discernment-retreats__image {
    padding: 0 20px 30px 20px;
  }
}

@media (min-width: 768px) {
  .c-discernment-retreats__content {
    padding-right: 0%;
  }
}

/* call to action contact card */

.c-vocations-contact {
  background-color: #f4efe5;
  padding: 3rem 1rem;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

.c-vocations-contact__container {
  max-width: var(--mid-width-max-width);
  margin: 0 auto;
  display: flex;
  width: fit-content;
  gap: 5rem;
  align-items: center;
}

.c-vocations-contact__image-container {
  flex: 1;
  max-width: 275px;
}

.c-vocations-contact__image-placeholder {
  aspect-ratio: 1/1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
}

.c-vocations-contact__image-placeholder p {
  margin: 0;
}

.c-vocations-contact__content {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.c-vocations-contact__title {
  color: var(--button-blue);
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
}

.c-vocations-contact__text {
  margin: 0;
  font-size: 1rem;
  color: var(--button-blue);
}

.c-vocations-contact__button {
  background-color: var(--button-blue);
  color: white;
  text-decoration: none;
  padding: 12px 30px;
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  max-width: fit-content;
  transition: all 0.3s ease;
}

.c-vocations-contact__button:hover {
  background-color: var(--button-blue);
  color: white;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.c-vocations-contact__signature {
  /* margin-top: 15px; */
  font-size: 0.9rem;
  color: var(--button-blue);
}

.c-vocations-contact__signature p {
  margin: 0;
}

@media (max-width: 600px) {
  .c-vocations-contact__container {
    flex-direction: column;
    text-align: center;
  }

  .c-vocations-contact__image-container {
    max-width: 200px;
  }

  .c-vocations-contact__button {
    margin: 10px auto;
  }
}

/* blue content section */

.c-inquiry-intro {
  background-color: #2e424d;
  color: white;
  padding: 10%;
  width: 100%;
}

.c-inquiry-intro__container {
  max-width: var(--main-section-max-width);
  margin: 0 auto;
}

.c-inquiry-intro__text {
  font-size: var(--mid-font);
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

@media (max-width: 50.99rem) {
  .c-inquiry-intro {
    padding: 25px 15px;
  }

  .c-inquiry-intro__text {
    font-size: 0.95rem;
  }
}

@media (min-width: 50.99rem) {
  .c-inquiry-intro {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg);
  }
}

/*  */

/* 50-50 novitiate section */

.c-novitiate-stage {
  width: 100%;
}

.c-novitiate-stage__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}

.c-novitiate-stage__content {
  flex: 1;
  padding: 30px;
  background-color: #fff;
  /* border-radius: 8px; */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.c-novitiate-stage__title {
  color: #a63232;
  font-family: "Serif", Georgia, Times, serif;
  font-size: 2.5rem;
  font-weight: normal;
  margin-bottom: 20px;
  font-style: italic;
}

.c-novitiate-stage__text {
  color: #2d4255;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.c-novitiate-stage__image {
  flex: 1;
  height: 100%;
}

.c-novitiate-stage__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

@media (max-width: 50.99rem) {
  .c-novitiate-stage__container {
    flex-direction: column;
  }

  .c-novitiate-stage__content {
    width: 100%;
    padding: 25px 20px;
  }

  .c-novitiate-stage__title {
    font-size: 2rem;
  }

  .c-novitiate-stage__image {
    width: 100%;
  }
}

/*  */

/* Main Styles */
.c-quote-section {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  background-color: var(--blue-color);
  padding: 3rem 10%;
  color: #ffffff;
}

.c-quote-container {
  width: 100%;
  margin: 0 auto;
  max-width: var(--mid-width-max-width);
}

.c-quote-text {
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  font-weight: normal;
  padding: 0;
  width: 100%;
}

.c-quote-author {
  font-size: 1.1rem;
  text-align: left;
  color: #f2a950;
  /* Golden/orange color as seen in the image */
}

/* Media Query for Mobile */
@media (max-width: 50.99rem) {
  .c-quote-section {
    margin-left: -5vw;
    padding: 2rem 8%;
  }

  .c-quote-text {
    font-size: 1.1rem;
  }

  .c-quote-author {
    font-size: 1rem;
  }
}

/*  */

/* Main CSS */
.c-quote-with-image {
  position: relative;
}

@media (min-width: 50.99rem) {
  .c-quote-with-image {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg);
    position: relative;
  }
}

@media (max-width: 50.99rem) {
  .c-quote-with-image {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg-mobile);
    position: relative;
  }
}

.c-quote-with-image__container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.c-quote-with-image__image-wrapper {
  width: 100%;
  position: relative;
}

.c-quote-with-image__image {
  width: 100%;
  height: auto;
  display: block;
}

.c-quote-with-image__content {
  position: absolute;
  left: 5%;
  bottom: 7%;
  max-width: 600px;
  background-color: rgba(27,
      78,
      107,
      0.85);
  /* Updated to blue with transparency */
  padding: 1rem 2rem;
  color: white;
}

.c-quote-with-image__quote {
  font-style: italic;
  font-size: var(--large-font);
  line-height: 1.4;
  margin: 0 0 1rem 0;
  font-weight: 300;
}

.c-quote-with-image__author {
  font-size: var(--small-font);
  font-weight: 500;
  color: #d4af37;
  /* Gold color for the author */
  display: block;
}

@media (max-width: 50.99rem) {
  .c-quote-with-image__content {
    position: relative;
    left: 0;
    bottom: 0;
    max-width: 100%;
    margin-top: -1rem;
  }

  .c-quote-with-image__quote {
    font-size: 1.2rem;
  }
}

/*  */

/* Main CSS for website */
.c-miracle-section {
  padding: 5rem 0;
  width: 100%;
}

.c-miracle-section.fullwidth {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  /* Account for parent padding on desktop */
  padding-left: 5%;
  padding-right: 5%;
}

.c-miracle-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: flex-start;
}

.c-miracle-text-column {
  flex: 1;
  border: 1px solid #000;
  padding: 2rem;
  margin: auto;
}

.c-miracle-title {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  text-align: center;
}

.c-miracle-content p {
  margin-bottom: 1rem;
}

.c-miracle-image-column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.c-miracle-section img {
  border-radius: 50%;
}

.c-miracle-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid #000;
}

@media (max-width: 50.99rem) {
  .c-miracle-container {
    flex-direction: column;
  }

  .c-miracle-section.fullwidth {
    width: var(--full-width);
    margin-left: -5vw;
    /* Account for parent padding on mobile */
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .c-miracle-text-column {
    padding: 1.5rem;
  }
}

/*  */

/* Main CSS for website */
.c-beatification-section {
  padding: 5rem 0;
  width: 100%;
}

.c-beatification-section.fullwidth {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  padding-left: 5%;
  padding-right: 5%;
}

.c-beatification-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: stretch;
}

.c-beatification-images {
  flex: 1;
  margin: auto;
}

.c-beatification-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
}

.c-beatification-image-item img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.c-beatification-image-item {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}

.c-beatification-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #000;
}

.c-beatification-text {
  flex: 1;
  display: flex;
  align-items: center;
}

.c-beatification-text-content {
  border: 3px solid var(--blue-green);
  padding: 2rem;
}

.c-beatification-title {
  color: white;
  background-color: var(--blue-green);
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: var(--mid-font);
  text-align: left;
  padding: 0.5rem 2rem;
  width: fit-content;
}

@media (max-width: 50.99rem) {
  .c-beatification-container {
    flex-direction: column;
  }

  .c-beatification-section.fullwidth {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg);
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .c-beatification-image-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
  }

  .c-beatification-text-content {
    padding: 1.5rem;
  }
}

/*  */

/* Prayer Card Styles */

.c-prayer-card--fullwidth {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  position: relative;
}

.c-prayer-card__container {
  display: flex;
  max-width: 3000px;
  justify-content: center;
  margin: 0 auto;
}

.c-prayer-card__relic {
  width: 45%;
  display: flex;
  flex-direction: column;
}

.c-prayer-card__relic img {
  height: 100%;
  object-fit: cover;
}

.c-prayer-card__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid #d9d0c7;
}

.c-prayer-card__caption {
  background-color: #f5f2ef;
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid #d9d0c7;
  border-left: 1px solid #d9d0c7;
  border-right: 1px solid #d9d0c7;
}

.c-prayer-card__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #333;
}

.c-prayer-card__dates {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: #666;
}

.c-prayer-card__prayer {
  width: 55%;
  background-color: #364958;
  color: #fff;
  padding: 3rem 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-prayer-card__title {
  font-size: 1.75rem;
  color: #d4af37;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.c-prayer-card__text {
  text-align: center;
  line-height: 1.6;
}

.c-prayer-card__text p {
  margin: 0.5rem 0;
}

/* Responsive styles */
@media (max-width: 50.99rem) {
  .c-prayer-card--fullwidth {
    margin-left: -5vw;
  }

  .c-prayer-card__container {
    flex-direction: column;
    padding: 0;
  }

  .c-prayer-card__relic,
  .c-prayer-card__prayer {
    width: 100%;
    padding: 0;
  }

  .c-prayer-card__relic {
    margin-bottom: 2rem;
  }

  .c-prayer-card__prayer {
    padding: 2rem 1.5rem;
  }
}

/*  */

.c-quote-section {
  background-color: var(--secondary-color);
  padding: 4rem 5%;
  color: #fff;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

.c-quote-content {
  flex: 2;
}

.c-quote-text {
  font-size: var(--small-font);
  line-height: 1.6;
  margin-bottom: 0;
}

.c-quote-paralax .c-quote-text {
  font-size: var(--small-font);
}

.c-quote-author {
  color: #f5ab35;
  font-size: 1rem;
}

.c-quote-cta {
  flex: 1;
  display: flex;
  justify-content: center;
}

.c-quote-button {
  background-color: #fff;
  color: var(--secondary-color);
  text-decoration: none;
  padding: 1rem 2rem;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  min-width: 180px;
}

.c-quote-button:hover {
  background-color: #f0f0f0;
}

@media (max-width: 50.99rem) {
  .c-quote-section {
    margin-left: -5vw;
    padding: 3rem 5%;
  }

  .c-quote-container {
    flex-direction: column;
  }

  .c-quote-cta {
    width: 100%;
  }

  .c-quote-button {
    width: 100%;
    padding: 0.75rem 1rem;
  }
}

/*  */

.c-testimonial-block {
  background-color: var(--blue-color);
  padding: 4rem 5%;
  color: #fff;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

.c-testimonial-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.c-testimonial-text-area {
  flex: 2;
}

.c-testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.c-testimonial-source {
  color: #f5ab35;
  font-size: 1rem;
  margin-bottom: 0;
}

.c-testimonial-action {
  flex: 1;
  display: flex;
  justify-content: center;
}

.c-testimonial-btn {
  background-color: #fff;
  color: var(--blue-color);
  text-decoration: none;
  font-size: clamp(1rem, 1.15vw, 3rem);
  font-weight: 600;
  font-family: var(--title-font-family);
  display: inline-block;
  font-weight: bold;
  text-align: center;
  min-width: 180px;
  padding: 1rem 1.5rem;
}

.c-testimonial-btn:hover {
  background-color: #f0f0f0;
}

@media (max-width: 50.99rem) {
  .c-testimonial-block {
    margin-left: -5vw;
    padding: 3rem 5%;
  }

  .c-testimonial-wrapper {
    flex-direction: column;
  }

  .c-testimonial-action {
    width: 100%;
  }

  .c-testimonial-btn {
    width: 100%;
    padding: 0.75rem 1rem;
  }
}

/*  */

.c-spiritual-life-section {
  width: 100%;
  padding: 5rem 10% 5rem;
  position: relative;
}

.c-spiritual-life-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/images/stories/auto-extract/homepage-l9996057_resized.jpg?1742577226");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.c-spiritual-life-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 2;
}

.c-spiritual-life-container {
  max-width: 600px;
  margin-left: 14vw;
  z-index: 3;
  position: relative;
}

.c-spiritual-life-heading {
  color: #fff;
  font-size: 3rem;
  text-align: left;
  margin-bottom: 2rem;
  font-weight: normal;
}

.c-spiritual-life-content {
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
}

.c-spiritual-life-content p {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

@media (max-width: 50.99rem) {
  .c-spiritual-life-section {
    padding: 3rem 5% 3rem;
    width: var(--full-width);
    margin-left: -5vw;
  }

  .c-spiritual-life-heading {
    font-size: 2.2rem;
  }

  .c-spiritual-life-content {
    font-size: 0.9rem;
  }

  .c-spiritual-life-container {
    margin-left: 0;
    padding: 0 5%;
  }
}

@media (min-width: 51rem) {
  .c-spiritual-life-section {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg);
  }
}

/*  */

/* Main CSS */
.c-inspiration-quote {
  width: 100%;
  max-width: var(--main-section-max-width);
  padding: 5rem 0;
  display: flex;
  justify-content: left;
  align-items: center;
  margin: auto;
}

.c-inspiration-wrapper {
  max-width: 1000px;
  text-align: left;
  margin: auto;
}

.c-inspiration-statement {
  font-size: var(--mid-font);
  line-height: 1.5;
  color: black;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.c-inspiration-source {
  font-size: var(--small-font);
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0;
  color: #eea439;
}

@media (max-width: 50.99rem) {
  .c-inspiration-quote {
    padding: 3rem 5% 3rem;
  }

  .c-inspiration-statement {
    font-size: 1.6rem;
  }
}

/*  */

.j-media-buttons h4 {
  display: none;
}

.j-media-buttons p {
  margin: 0;
}

.j-media-buttons a {
  width: 100%;
  max-width: 300px;
}

.j-media-buttons .g-blockcontent>.g-blockcontent-subcontent {
  gap: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

#g-mainbar:has(.j-media-buttons) .j-media-buttons {
  padding: 65px 0 !important;
}

.j-media-buttons a {
  padding: 0.85vw 1.25rem;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: var(--title-font-family);
}

.j-media-buttons .g-blockcontent-buttons {
  display: flex;
}

.j-media-buttons .g-blockcontent-buttons a {
  margin: auto;
  font-size: clamp(1.25rem, 1.15vw, 3rem);
}

.j-media-buttons .g-blockcontent-subcontent {
  max-width: fit-content;
  margin: auto;
}

@media (max-width: 50.99rem) {
  .j-media-buttons .g-blockcontent-subcontent {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  .j-media-buttons .g-blockcontent-subcontent a {
    width: 100%;
    max-width: 100%;
  }

  .j-media-buttons .g-blockcontent-subcontent p {
    text-align: center;
  }

  .j-media-buttons a {
    padding: 1rem 1.25rem;
  }

  .j-media-buttons .g-blockcontent>.g-blockcontent-subcontent {
    padding: 0 5%;
  }
}

/*  */

.pretty-documents {
  padding-top: 2rem !important;
  padding-bottom: 5% !important;
}

.pretty-documents .koowa_media__item {
  padding: 0 !important;
}

.pretty-documents .koowa_media__item__thumbnail {
  aspect-ratio: 8.5/11;
}

.pretty-documents .koowa_media__item__thumbnail img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

.pretty-documents .k-ui-namespace .mod_docman .koowa_media--gallery .koowa_media__item__link {
  padding: 0 !important;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

.pretty-documents .koowa_media {
  display: flex;
  gap: 1rem;
}

.pretty-documents .k-ui-namespace .mod_docman .koowa_media--gallery .koowa_media_contents {
  margin: 0 !important;
}

/*  */

/* Donation Section Styles */
.c-donation-section {
  width: 100%;
  padding: 4rem 0;
}

.c-donation-container {
  display: flex;
  flex-direction: row-reverse;
  max-width: 1200px;
  margin: 0 auto;
  gap: 5rem;
}

.c-donation-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: fit-content;
  margin: auto;
}

.c-donation-text p {
  margin-bottom: 1rem;
  font-size: var(--small-font);
}

.c-donate-button {
  display: inline-block;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  padding: 0.6rem 2rem;
  text-decoration: none;
  text-align: center;
  margin-top: 1rem;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
  align-self: flex-start;
  width: fit-content;
}

.c-donate-button:hover {
  background-color: var(--primary-color);
  color: white;
}

.c-donation-images {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  height: fit-content;
}

.c-image-top {
  height: 30%;
  overflow: hidden;
  aspect-ratio: 2/1;
}

.c-image-bottom-container {
  display: flex;
  height: 30%;
  gap: 0.5rem;
}

.c-image-bottom-left,
.c-image-bottom-right {
  width: 50%;
  overflow: hidden;
}

.c-donation-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 50.99rem) {
  .c-donation-container {
    flex-direction: column;
    padding: 0 5%;
  }

  .c-donation-container {
    gap: 0rem !important;
  }

  .c-donation-section {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg-mobile);
    padding: 3rem 0;
  }

  .c-donation-text {
    padding-right: 0;
    order: 2;
  }

  .c-donation-images {
    order: 1;
    margin-bottom: 2rem;
  }

  .c-donate-button {
    align-self: center;
    width: 80%;
  }

  .c-image-text-section {
    padding: 5%;
  }
}

/*  */

/* Specific Projects Section Styles */
.c-specific-projects-section {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  padding: 0;
}

.c-specific-projects-container {
  display: flex;
  max-width: 100%;
}

.c-specific-projects-image {
  flex: 1;
  max-width: 50%;
  overflow: hidden;
}

.c-specific-projects-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-specific-projects-content {
  flex: 1;
  padding: 3rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-specific-projects-title {
  color: var(--primary-color);
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.c-specific-projects-text {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
}

.c-specific-projects-contact {
  margin-top: 1rem;
}

.c-specific-projects-contact p {
  margin-bottom: 0.5rem;
}

.c-specific-projects-contact a {
  color: var(--primary-color);
  text-decoration: none;
}

.c-specific-projects-contact a:hover {
  text-decoration: underline;
}

@media (max-width: 50.99rem) {
  .c-specific-projects-section {
    margin-left: -5vw;
  }

  .c-specific-projects-container {
    flex-direction: column;
  }

  .c-specific-projects-image,
  .c-specific-projects-content {
    max-width: 100%;
    width: 100%;
  }

  .c-specific-projects-content {
    padding: 2rem 5vw;
  }
}

/*  */

/* Magazine Signup Section Styles */
.c-magazine-signup-section {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  padding: 3rem 0;
  /* background-color: #f7f7f7; */
  text-align: center;
}

.c-magazine-signup-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.c-magazine-title {
  margin-bottom: 1rem;
}

.c-script-title {
  max-width: 500px;
  width: 100%;
  height: auto;
}

.c-magazine-subtitle {
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: normal;
  margin-top: 1rem;
}

@media (max-width: 50.99rem) {
  .c-magazine-signup-section {
    margin-left: -5vw;
    padding: 2rem 0;
  }

  .c-magazine-signup-container {
    padding: 0 5vw;
  }

  .c-script-title {
    max-width: 300px;
  }

  .c-magazine-subtitle {
    font-size: 1.2rem;
  }
}

/*  */

.sols-grid .g-joomla-articles .g-grid {
  margin: 0;
  position: relative;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.sols-grid .g-joomla-articles .g-grid .g-array-item-read-more {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translate(-50%);
  margin: 0;
  z-index: 5;
}

.sols-grid .g-array-item-read-more a {
  background-color: var(--button-blue);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-weight: 600;
  margin: 0;
  transition: all 0.3s ease;
}

.sols-grid .g-array-item-read-more a:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.sols-grid .g-joomla-articles .g-grid .g-array-item-title {
  position: absolute;
  bottom: 35%;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.sols-grid .g-joomla-articles .g-grid .g-array-item-title h3 a {
  color: white;
  border: none;
  font-family: var(--body-font-family);
  font-size: clamp(1.5rem, 1.65vw, 2.5rem);
  text-decoration-line: none;
  font-weight: bold;
}

.sols-grid .g-joomla-articles .g-grid .g-array-item-title h3 {
  border: none;
  padding: 0 1rem;
}

.sols-grid .g-joomla-articles .g-array-item-image img {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.sols-grid .g-grid::after {
  content: "";
  /* Required for pseudo-elements */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,
      0,
      0,
      0.25);
  /* Semi-transparent black overlay; adjust as needed */
  z-index: 1;
  /* Ensure overlay is above grid content but below other elements if needed */
  pointer-events: none;
  /* Allows clicks to pass through to underlying elements */
}

.sols-grid p {
  display: none;
}

@media (min-width: 50.99rem) {
  .sols-grid .g-joomla-articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 50.99rem) {
  .sols-grid .g-joomla-articles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/*  */

/* Main CSS */
@media (min-width: 50.99rem) {
  .c-testimonial-section {
    width: 80vw;
    margin-left: -10vw;
    padding: 5rem 0;
  }
}

.c-testimonial-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
  gap: 10%;
}

.c-testimonial-image {
  flex: 0 0 35%;
  display: grid;
  align-items: center;
}

.c-testimonial-image img {
  width: 100%;
  height: auto;
  display: block;
}

.c-testimonial-content {
  /* flex: 0 0 50%; */
  height: fit-content;
  margin: auto;
}

.c-testimonial-title {
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--tertiary-color);
}

.c-testimonial-text p:last-child {
  margin-bottom: 0;
}

.c-testimonial-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

@media (max-width: 50.99rem) {
  .c-testimonial-container {
    flex-direction: column;
    padding: 0 5%;
    gap: 2rem;
  }

  .c-testimonial-image {
    flex: 0 0 100%;
    max-width: 80%;
    margin: 0 auto;
  }

  .c-testimonial-content {
    flex: 0 0 100%;
  }

  .c-testimonial-title {
    font-size: 1.75rem;
    text-align: center;
  }
}

/*  */

/* Main CSS */
.c-quote-fullwidth-section {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  overflow: hidden;
}

.c-quote-fullwidth-container {
  display: flex;
  width: 100%;
}

.c-quote-content {
  flex: 0 0 50%;
  background-color: #f2e0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5% 5%;
}

.c-quote-text p {
  font-size: var(--mid-font);
  line-height: 1.6;
  color: black;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.c-quote-author {
  font-size: 1rem !important;
  color: #a88b6e;
  font-style: normal !important;
  font-weight: 600;
  margin-top: 2rem;
}

.c-quote-text p:last-child {
  margin-bottom: 0;
}

.c-quote-image {
  flex: 0 0 50%;
  height: 100%;
}

.c-quote-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 50.99rem) {
  .c-quote-fullwidth-section {
    margin-left: -5vw;
  }

  .c-quote-fullwidth-container {
    flex-direction: column;
  }

  .c-quote-content {
    flex: 0 0 100%;
    padding: 10% 5%;
    order: 2;
  }

  .c-quote-text {
    max-width: 100%;
  }

  .c-quote-text p {
    font-size: 1.25rem;
  }

  .c-quote-image {
    flex: 0 0 100%;
    height: 50vw;
    order: 1;
  }
}

/*  */

/* Main CSS */
.c-schedule-section {
  padding: 5rem 0rem;
  width: 100%;
}

.c-schedule-container {
  max-width: 800px;
  margin: 0 auto;
}

.c-schedule-daily {
  margin-bottom: 2.5rem;
}

.c-schedule-item {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
}

.c-schedule-time {
  color: #c0b9a8;
  font-weight: 600;
  margin-right: 0.5rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.c-schedule-activity {
  color: #c0b9a8;
}

.c-schedule-subtitle {
  color: #c0b9a8;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.c-schedule-prayer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-schedule-prayer-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.75rem;
  color: #c0b9a8;
}

.c-schedule-prayer-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #d8985d;
}

@media (max-width: 50.99rem) {
  .c-schedule-section {
    padding: 3rem 1rem;
  }

  .c-schedule-item {
    flex-direction: column;
    margin-bottom: 1.25rem;
  }

  .c-schedule-time {
    margin-right: 0;
    margin-bottom: 0.25rem;
  }
}

/*  */

/* Main CSS */
.c-gallery-masonry-section {
  /* padding: 4rem 2rem; */
  width: 100%;
}

.c-gallery-masonry-container {
  max-width: 1200px;
  margin: 0 auto;
}

.c-gallery-masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.5rem;
}

.c-gallery-masonry-item {
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  /* margin-bottom: 1rem; */
}

.c-gallery-masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.c-gallery-masonry-item:hover img {
  transform: scale(1.03);
}

.c-gallery-masonry-item-large {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 80rem) {
  .c-gallery-masonry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 60rem) {
  .c-gallery-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 50.99rem) {
  .c-gallery-masonry-section {
    padding: 3rem 1rem;
  }

  .c-gallery-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.75rem;
  }

  .c-gallery-masonry-item {
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 30rem) {
  .c-gallery-masonry-grid {
    grid-template-columns: 1fr;
  }

  .c-gallery-masonry-item-large {
    grid-column: auto;
    grid-row: auto;
  }
}

/*  */

.site-1-home #contentarray-1028-particle>div>div>div>div>div>div.g-array-item-text>p:nth-child(3)>strong>a {
  background-color: var(--button-blue);
  color: white;
  border: 2px solid var(--button-blue);
}

/*  */

ul {
  margin-left: 3.5rem;
}

li {
  line-height: 2;
}

.our-charism-page #g-mainbar {
  padding-bottom: 0 !important;
}

@media (min-width: 50.99rem) {
  .plain-content {
    max-width: var(--main-section-max-width);
  }
}

/* .c-donation-section {
  width: var(--full-width);
  max-width: var(--full-width-max-width);
  margin-left: var(--full-width-margin-neg);
} */

.c-donation-container {
  flex-direction: row-reverse;
  align-items: center;
}

@media (max-width: 60.99rem) {
  .c-donation-container {
    flex-direction: column !important;
  }
}

.death-of-mother-elisabetta .c-text-block img {
  border-radius: 0 !important;
}

/*  */

/* Saint Biography Section Styles */
.c-saint-biography {
  background-color: var(--tertiary-color);
  color: var(--default-white);
  padding: 4rem 5%;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  position: relative;
}

.c-saint-biography__container {
  display: flex;
  max-width: var(--mid-width-max-width);
  margin: 0 auto;
  gap: 2rem;
}

.c-saint-biography__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-saint-biography__text p {
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: var(--small-font);
  font-family: var(--body-font-family);
}

.c-saint-biography__image {
  flex: 1;
  max-width: 45%;
}

.c-saint-biography__image img {
  width: auto;
  object-fit: cover;
  height: 100%;
  display: block;
}

/* Media Queries */
@media (max-width: 50.99rem) {
  .c-saint-biography {
    padding: 3rem 5%;
  }

  .c-saint-biography__container {
    flex-direction: column;
  }

  .c-saint-biography__image {
    max-width: 100%;
    margin-top: 2rem;
    order: -1;
    /* Move image to top on mobile */
  }
}

/* For fullwidth implementation if needed */
.c-saint-biography--fullwidth {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  max-width: var(--full-width-max-width);
}

@media (max-width: 50.99rem) {
  .c-saint-biography--fullwidth {
    margin-left: var(--mid-width-margin-neg);
  }
}

/*  */

.death-of-mother-elisabetta .c-text-block {
  padding: 0;
}

.death-of-mother-elisabetta .c-text-block p {
  margin: 0;
}

/*  */

.big-padding-section h6 {
  color: var(--tertiary-color);
  font-size: var(--mid-font);
}

.our-spirituality .c-quote-container {
  max-width: var(--main-section-max-width);
  font-size: var(--mid-font);
}

.pray-with-us .c-vocations-inquiry {
  background-color: transparent;
}

.pray-with-us .c-vocations-inquiry :is(p, cite) {
  color: var(--tertiary-color);
  font-style: normal;
}

.pray-with-us .c-vocations-inquiry__quote {
  margin-top: 0;
}

.pray-with-us .c-vocations-inquiry .button {
  background-color: var(--button-blue);
  color: white;
  padding: 1rem 2rem;
  border: none;
}

.community-life .image-container {
  aspect-ratio: 1/1.4;
}

.community-life .blue-banner-section h1 {
  font-size: var(--mid-font);
}

.community-life .blue-banner-section cite {
  font-size: var(--small-font);
}

/*  */

/* Section: Image Text */

.c-image-text-section {
  width: 101vw;
  margin-left: var(--full-width-margin-neg);
}

.c-image-text-section .c-container {
  margin: auto;
  max-width: 2500px;
}

.c-image-text-section__grid {
  display: flex;
  align-items: center;
  /* gap: 3rem; */
}

.c-image-text-section__image-wrapper {
  flex: 1 1 50%;
}

.c-image-text-section__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.c-image-text-section__text-wrapper {
  flex: 1 1 50%;
  padding: 2rem 4rem 2rem 4rem;
}

.c-image-text-section__text-wrapper p {
  margin: 0;
  line-height: 1.6;
}

/* Media Query for smaller screens */
@media (max-width: 50.99rem) {
  .c-image-text-section__grid {
    flex-direction: column;
  }

  .c-image-text-section__image-wrapper,
  .c-image-text-section__text-wrapper {
    flex-basis: 100%;
  }

  .c-image-text-section__text-wrapper {
    padding-top: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
}

/*  */

@media (min-width: 51rem) {
  .c-c-right-image .flex-grid-item-2 {
    flex-direction: row-reverse;
  }
}

.flex-grid-item-2 .c-image-text-section__text-wrapper {
  padding: 2rem 4rem 2rem 4rem;
}

/*  */

/* Main CSS */
.c-cta-banner {
  background-color: #6a8289;
  /* Approximate color from image */
  padding: 3rem 2%;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

.c-cta-banner__container {
  max-width: var(--mid-width-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2rem;
}

.c-cta-banner__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.c-cta-banner__title {
  font-size: var(--mid-font);
  color: #ffffff;
  /* Assuming white text based on contrast */
  margin-bottom: 1rem;
}

.c-cta-banner__button {
  font-size: var(--small-font);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease;
}

.c-cta-banner__button--primary {
  background-color: #ffffff;
  color: #333333;
  /* Dark text for light button */
  border: 1px solid #ffffff;
}

.c-cta-banner__button--primary:hover {
  background-color: #f0f0f0;
}

.c-cta-banner__button--secondary {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.c-cta-banner__button--secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 50.99rem) {
  .c-cta-banner__container {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }

  .c-cta-banner__cta {
    width: 100%;
    max-width: 350px;
    /* Limit width on smaller screens for better readability */
  }
}

/*  */

.passion-for-education #g-mainbar {
  padding-bottom: 0 !important;
}

/*  */

/* Main CSS */
.c-text-section {
  padding: 3rem 2%;
  background-color: #ffffff;
  /* Assuming a white background */
}

.c-text-block>p {
  margin-bottom: 0 !important;
}

.contact-us-page .c-text-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.c-text-section__container {
  max-width: var(--main-section-max-width);
  /* Using main-section-max-width for text-heavy sections */
  margin: 0 auto;
  text-align: center;
}

.c-text-section__title {
  font-size: var(--large-font);
  color: #004d40;
  /* Dark teal - approximate color from image */
  margin-bottom: 1rem;
  font-family: serif;
  /* Adding serif font */
}

.c-text-section__paragraph {
  font-size: var(--mid-font);
  color: #333333;
  /* Dark gray for paragraph */
  line-height: 1.6;
  font-family: serif;
  /* Adding serif font */
}

@media (max-width: 50.99rem) {
  .c-text-section {
    padding: 2rem 4%;
    /* Adjusted padding for smaller screens */
  }

  .c-text-section__title {
    font-size: var(--mid-font);
    /* Adjust font size for smaller screens if needed */
  }

  .c-text-section__paragraph {
    font-size: var(--small-font);
    /* Adjust font size for smaller screens if needed */
  }
}

/*  */

/* styles.css */
.c-locations-worldwide {
  padding: 3rem 5%;
  /* Vertical padding in rem, horizontal in percentage */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  background-color: #e5e4d8;
}

.c-locations-worldwide__content {
  /* max-width: var(--mid-width-max-width); */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-locations-worldwide__title {
  font-size: var(--large-font);
  color: white;
  background-color: var(--button-blue);
  padding: 0.75rem 1.5rem;
  font-family: var(--title-font-family);
  border: 1px solid #ccc;
  /* Light grey border */
  display: inline-block;
  /* To make padding and border apply correctly */
  margin-bottom: 3rem;
  /* Space below the title */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Optional: subtle shadow like in image */
  margin-top: 0;
}

.c-locations-worldwide__map {
  max-width: 100%;
  height: auto;
  /* Maintain aspect ratio */
  display: block;
  /* Remove extra space below image */
}

/* Media Query for smaller screens */
@media (max-width: 50.99rem) {
  .c-locations-worldwide {
    padding: 1.5rem 3%;
  }

  .c-locations-worldwide__title {
    font-size: var(--mid-font);
    padding: 0.6rem 1.2rem;
    margin-bottom: 1.5rem;
  }
}

/*  */

.catechesis-and-evangelization #g-mainbar {
  padding-bottom: 0 !important;
}

/*  */

.vocation-information .c-quote-section {
  background-color: var(--tertiary-color);
}

/*  */

.vocational-stories .quote-container h1 {
  color: var(--tertiary-color);
}

.vocational-stories #g-mainbar {
  padding-bottom: 0;
}

a.white-button {
  background-color: white;
  color: var(--tertiary-color);
  text-transform: capitalize;
  border-radius: 0;
  font-size: var(--mid-font);
  border: none;
  padding: 0.75rem 2rem;
  transition: transform 0.3s ease-out;
}

a.white-button:hover {
  transform: scale(1.1) !important;
  transition: transform 0.3s ease-out;
}

/*  */

.donate-page .gallery-container .image-container {
  aspect-ratio: 1/1.4;
}

.donate-page .c-donate-button:hover {
  background-color: var(--tertiary-color);
  border: none;
}

.donate-online-form #g-mainbar {
  padding-bottom: 0 !important;
}

/*  */

.site-1-home #g-header {
  background: url("/images/template/background.jpg") 50% 50%;
  background-size: contain;
  background-repeat: repeat;
  background-position: center;
}

#logo-4559-particle {
  width: 90%;
  margin: auto !important;
}

a.donate {
  font-weight: 600;
}

.texture-content-background {
  background: url("/images/template/background.jpg") 50% 50%;
  background-size: contain;
  background-repeat: repeat;
  background-position: center;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  padding: 5rem 3rem;
}

.texture-content-background .texture-container {
  max-width: var(--main-section-max-width);
  margin: auto;
}

/*  */

.site-1-home #g-expanded>.g-container {
  width: 100%;
  max-width: 1150px;
  margin: auto;
}

.site-1-home #g-expanded {
  padding: 7% 10% 7% 10% !important;
  padding-top: 0 !important;
}

.site-1-home #g-expanded>.g-container>.g-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.site-1-home #g-expanded>.g-container>.g-grid>.g-block {
  width: initial;
  max-width: initial;
}

/* featured tiles */

.featured-tiles {
  --primary-tile-color: rgba(80, 133, 141, 1);
  --primary-tile-rgb: 80, 133, 141;
}

.featured-tiles {
  position: relative;
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
}

.featured-tiles .g-array-item-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.5s ease;
}

.featured-tiles .g-array-item-image img {
  height: 100%;
  object-fit: cover;
}

.featured-tiles .g-title {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  padding: 1rem 1rem 1rem 1rem;
  z-index: 7;
  margin: 0 10%;
  border-bottom: 7px solid var(--primary-tile-color);
  font-weight: bold;
  font-size: clamp(1.25rem, 1.25vw, 2rem) !important;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  line-height: 1;
}

.featured-tiles .g-array-item-text {
  position: absolute;
  bottom: 30%;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  padding: 0rem 10%;
  z-index: 10;
  margin: 0 !important;
}

.featured-tiles .g-array-item-text #text {
  display: none;
}

.featured-tiles .g-array-item-text p {
  margin: 0;
  font-size: var(--small-font) !important;
  line-height: 1.5;
  font-weight: 600;
  text-shadow: var(--default-box-shadow);
}

.featured-tiles .g-array-item-read-more {
  bottom: 7%;
  position: absolute;
  width: 100%;
  text-align: center;
  margin: 0;
  background-color: var(--primary-tile-color);
  z-index: 10;
  box-shadow: var(--default-box-shadow);
  transition: all 0.3s ease;
}

.featured-tiles .g-array-item-read-more a {
  color: white;
  font-size: var(--small-font) !important;
  padding: 1rem 2rem;
  border: none;
  width: 100%;
}

.featured-tiles .button:hover,
.featured-tiles .button:focus {
  border: initial !important;
  background: initial !important;
  border-radius: initial !important;
  padding: 1rem 2rem;
}

.featured-tiles .g-array-item-read-more:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.featured-tiles::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--primary-tile-rgb), 0.25);
  z-index: 5;
}

/*  */

.orange.featured-tiles {
  --primary-tile-color: rgba(141, 76, 34, 1);
  --primary-tile-rgb: 141, 76, 34;
}

.red.featured-tiles {
  --primary-tile-color: rgba(189, 40, 39, 1);
  --primary-tile-rgb: 189, 40, 39;
}

.mother-elisabetta-renzi .c-quote-paralax {
  background-image: url(/images/stories/auto-extract/charism_banner_resized.jpg?1744388917);
}

.copyright .g-array-item-text {
  margin: 0 !important;
}

.our-spirituality .c-history-content {
  border: none;
}

li::marker {
  visibility: hidden;
  display: none;
  color: transparent;
}

/* wavy background */

/* Container must be relative for the absolute child to position correctly */
section.wavy-background {
  position: relative;
  z-index: 2;
}

/* Ensure content sits on top of the background */
section.wavy-background div {
  position: relative;
  z-index: 2;
}

section.wavy-background::after {
  /* Background Image Setup */
  background: url("/images/template/background.jpg") 50% 50%;
  background-size: 13%;
  background-repeat: repeat;
  background-position: center;
  content: "";

  /* Absolute Positioning */
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;

  /* 1. Set width to 125vw 
     2. Reset 'right' to auto (overriding previous right:0)
     3. Anchor 'left' to 0 so the margin calculation works 
  */
  width: 125vw;
  max-width: 125vw;
  inline-size: 125vw;
  max-inline-size: 125vw;
  right: auto;
  left: 0;

  /* Center the element:
     50% (of parent center) - 62.5vw (half of element width) 
  */
  margin-left: calc(50% - 62.5vw);
  margin-right: calc(50% - 62.5vw);
  margin-inline-start: calc(50% - 62.5vw);
  margin-inline-end: calc(50% - 62.5vw);
}

/* end wavy background */

/* tan background */

section.tan-background::after {
  background-color: var(--tan-color);
  content: "";
  left: -20vw;
  right: 0;
  top: 0;
  bottom: 0;
  width: 120vw;
  position: absolute;
  z-index: 1;
}

section.tan-background {
  position: relative;
  z-index: 2;
}

section.tan-background div {
  z-index: 2;
  position: relative;
}

/* end tan background */

/* white arrow button */

.featured-tiles a.button::after {
  content: "";
  display: grid;
  width: 1rem;
  height: auto;
  aspect-ratio: 1.2/1;
  background: url(/images/template/double-arrows-marker-felt-whites.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s ease-in;
}

.featured-tiles a.button {
  display: flex;
  gap: 1rem;
  width: fit-content;
  margin: auto;
  padding: 1rem 1.5rem;
  font-weight: 500;
}

/*  */

.foundress-page #g-mainbar>div:nth-child(2)>div>div>div>div>div>div:nth-child(4)>section.wavy-background.c-content-section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.prayer-life-page .c-image-grid,
.c-image-item img {
  aspect-ratio: 1/0.75;
}

/*  */

.community-life .blue-banner-section h1 {
  color: black;
  font-size: var(--small-font);
}

.upcoming-events-page #g-mainbar {
  padding: 0 !important;
}

.upcoming-events-page .c-vocations-inquiry {
  margin-left: 0 !important;
}

.tockify-calendar {
  padding: 0 20vw;
  background-color: #faf6ef;
}

.tockify-calendar>p {
  margin: 0;
}

#g-mainbar .moduletable {
  margin: 0;
}

.j-media-buttons {
  background: url("/images/template/background.jpg") 50% 50%;
  background-size: 20%;
  background-repeat: repeat;
  background-position: center;
}

.upcoming-events-page .j-media-buttons {
  margin: 0 !important;
}

.upcoming-events-page .c-vocations-inquiry {
  background-color: #e9cca1;
}

.upcoming-events-page .c-vocations-inquiry__title,
.upcoming-events-page .c-vocations-inquiry__quote,
.upcoming-events-page .c-vocations-inquiry__author {
  color: var(--footer-blue);
}

.j-media-buttons {
  width: 101vw;
  margin-left: var(--full-width-margin-neg) !important;
}

.donate-page .second-one .c-specific-projects-container {
  flex-direction: row-reverse;
}

.donate-page .c-specific-projects-image {
  flex: 50%;
  width: 50%;
}

.donate-page .c-specific-projects-content {
  padding: 4rem 7rem !important;
}

.where-we-serve #g-mainbar>div:nth-child(2)>div>div>div>div>div>div:nth-child(4)>section.c-gallery-masonry-section.wavy-background>p:nth-child(5) {
  margin-bottom: 0;
}

.latest-news-page .grid {
  margin-top: 2rem !important;
}

.j-media-buttons a:hover {
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
  color: white;
}


.contact-us-page .partner-section .white-arrow-button {
  border: none;
}

.contact-us-page .partner-section .white-arrow-button::after {
  display: none;
}

.latest-news-page .grid-articles .g-array-item-text p {
  line-height: 1;
  font-size: 1vw !important;
  line-height: 2;
}

.latest-news-page .grid-articles .g-array-item-text span {
  font-size: 1vw !important;
}

.latest-news-page .grid-articles .g-item-title,
.latest-news-page .grid-articles .g-item-title a {
  /* font-size: 1.75vw; */
  color: black;
}



@media (min-width: 50.99rem) {

  .latest-news-page .grid-articles .g-item-title,
  .latest-news-page .grid-articles .g-item-title a {
    font-size: 1.75vw;
    color: black;
  }
}

.latest-news-page .grid-sideways .g-content-array {
  gap: 0rem !important;
}

.mother-elisabetta-renzi .c-quote-text span {
  color: white;
  background-color: transparent;
}

/*  */

.latest-news-page .grid .g-joomla-articles .g-content {
  position: relative;
}

.latest-news-page .grid .g-joomla-articles .g-content::after {
  position: absolute;
  width: fit-content;
  height: auto;
  bottom: 0.5rem;
  right: 0.5rem;
  content: "Read More >>";
  color: var(--button-blue);
  font-weight: bold;
}

.latest-news-page .grid-articles .g-content-array>.g-grid {
  border-bottom: 2px solid rgba(58, 58, 58, 0.24);
}

.latest-news-page .grid-articles .g-content-array>.g-grid>.g-block {
  transition: none;
}

.latest-news-page .grid-sideways.grid-articles.grid-wide {
  --grid-grid-height: 15vw;
}

.latest-news-page .grid-bg-white .g-content-array>.g-grid>.g-block {
  padding: 2rem 0 !important;
}

.latest-news-page .grid-bg-white .g-content-array>.g-grid:first-child>.g-block {
  padding-top: 0 !important;
}

.latest-news-page .grid-articles {
  --grid-scale-amount: 0.98 !important;
}

/*  */

.latest-news-page .j-news-button a {
  background-color: var(--secondary-color);
  color: white;
}

.ardere-et-lucere .ardere-button a {
  background-color: var(--secondary-color);
  color: white;
}

.videos-page .video-button a {
  background-color: var(--secondary-color);
  color: white;
}

.upcoming-events-page .events-button a {
  background-color: var(--secondary-color);
  color: white;
}

/*  */

.k-ui-namespace .mod_docman .koowa_media--gallery .koowa_media__item__link {
  padding: 0;
}

.latest-news-page .grid-articles.grid-wide .g-array-item-image img {
  aspect-ratio: 16/12;
}

.latest-news-page .grid-sideways.grid-articles.grid-wide {
  --grid-grid-ar-width-mult: 1.5;
}

.jotform-form input {
  border: none !important;
}

/*  */

.vocation-information {
  --full-width-margin-neg: -18.5vw;
}

.vocation-information #g-mainbar {
  padding: 0 17%;
}

.vocation-information #g-mainbar .c-vocations-contact {
  width: 100% !important;
  margin: initial !important;
}

.vocation-information .partner-section {
  background: var(--blue-green);
}

.vocation-information .white-arrow-button {
  border: none;
}

/*  */

.latest-news-page .g-content-array-pagination {
  margin-top: 1.5rem;
}

/*  */
/* -----------------------------------------------------------
   Scoped Component: .ardere-newsletters
   Description: Responsive side-by-side layout with theme variables,
   max-width constraints, and interactive hover effects.
----------------------------------------------------------- */

/* 1. Main Container & Constraints */
.ardere-newsletters.moduletable {
  display: block;
  max-width: var(--main-section-max-width, 900px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.ardere-newsletters.moduletable {
  margin: auto !important;
  margin-bottom: 2rem !important;
}

/* 2. Reset the Item Row (Container) */
.ardere-newsletters .koowa_media__item {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left !important;
}

/* Remove separator/spacing for the very last item */
.ardere-newsletters .koowa_media__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 3. Link Wrapper - Resets */
.ardere-newsletters .koowa_media__item__link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  text-decoration: none;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
}

/* 4. The Flex Parent (Holds Image + Text) */
.ardere-newsletters .koowa_media__item__content-holder {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 3rem;
  width: 100% !important;
  height: auto !important;
  background: none !important;
}

/* 5. Thumbnail Styling & Animation */
.ardere-newsletters .koowa_media__item__thumbnail {
  min-width: 0 !important;
  min-inline-size: 0 !important;
  flex: 0 0 350px;
  width: 350px !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  perspective-origin: unset !important;
  transform-origin: unset !important;
  block-size: auto !important;
  overflow: hidden;
}

@media (max-width: 50.99rem) {
  .ardere-newsletters .koowa_media__item__thumbnail {
    min-width: 0 !important;
    min-inline-size: 0 !important;
    flex: 0 0 150px;
    width: 150px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    perspective-origin: unset !important;
    transform-origin: unset !important;
    block-size: auto !important;
    overflow: hidden;
  }
}

.ardere-newsletters .koowa_media__item__thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  border: 1px solid #eee;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  transform-origin: center center;
}

/* Added: HOVER - Zoom Image */
.ardere-newsletters .koowa_media__item__link:hover .koowa_media__item__thumbnail img {
  transform: scale(1.03);
  /* Subtle zoom */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 6. Text Content Styling */
.ardere-newsletters .koowa_media__item__label {
  flex: 1 1 auto;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  position: static !important;
  perspective-origin: unset !important;
  transform-origin: unset !important;
  block-size: auto !important;
}

/* Inner Text Containers */
.ardere-newsletters .koowa_header__item,
.ardere-newsletters .koowa_wrapped_content,
.ardere-newsletters .whitespace_preserver,
.ardere-newsletters .overflow_container {
  width: 100% !important;
  height: auto !important;
  white-space: normal !important;
  position: static !important;
  display: block !important;
  text-align: left !important;
}

/* Typography using Variables */
.ardere-newsletters .overflow_container {
  font-family: inherit;
  font-size: 1.5rem;
  /* Slightly larger title */
  font-weight: 600;
  /* Use Dark Blue variable */
  color: var(--dark-blue, #2f4450);
  line-height: 1.4;
  margin-bottom: 1rem;

  /* Added: Animation Setup */
  transition: color 0.2s ease;
}

/* Added: HOVER - Change Title Color */
.ardere-newsletters .koowa_media__item__link:hover .overflow_container {
  color: var(--red-color, #9d0c02);
}

/* 7. "READ MORE >>" Styling */
.ardere-newsletters .koowa_header__item--title_container::after {
  content: "READ MORE \00BB";
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 800;
  color: var(--button-blue, #1b4e6b);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Added: HOVER - Move Arrow & Change Color */
.ardere-newsletters .koowa_media__item__link:hover .koowa_header__item--title_container::after {
  color: var(--red-color, #9d0c02);
}

/* 8. Mobile Styles */
@media (max-width: 50.99rem) {
  .ardere-newsletters .koowa_media__item__content-holder {
    gap: 1rem;
  }
}

/* 9. Cleanup for deep overrides */
.ardere-newsletters .koowa_media__item__content.document {
  background-image: none !important;
  border: none !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/*  */

.vocational-stories #g-mainbar,
.meet-the-sisters #g-mainbar {
  padding: 0 17% !important;
}

.left-image,
.right-image,
.c-image-text-section__image-wrapper {
  overflow: hidden;
}

.c-image-text-section img {
  max-height: 500px;
  width: 100%;
  object-fit: cover;
}

.c-image-text-section p {
  max-width: 65ch;
}

.c-c-right-image.right-image p {
  margin-left: auto;
}

.passion-for-education .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/OLS_4963.jpg");
  background-position: top;
}

/*  */

/* Keep your existing padding preference */
.latest-news-grid.grid-articles .g-content-array>.g-grid {
  padding: 1.5rem 0;
}

/* Updated Grid Definition */
.latest-news-grid .g-array-item {
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas:
    "image title"
    "image date"
    "image text"
    "image read-more" !important;
  column-gap: 30px;
  row-gap: 10px;

  /* FORCE TOP ALIGNMENT FOR ALL ITEMS */
  align-items: start !important;

  /* Reset fixed heights from base HTML */
  height: auto !important;
  min-height: auto !important;
  margin-bottom: 40px;
}

/* Title Area */
.latest-news-grid .g-array-item-title {
  grid-area: title !important;
  /* Changed from end to start */
  align-self: start !important;
}

/* Date Area */
.latest-news-grid .g-array-item-details {
  grid-area: date !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  /* Explicit top alignment */
  align-self: start !important;
}

/* Text Area */
.latest-news-grid .g-array-item-text {
  grid-area: text !important;
  height: auto !important;
  max-height: none !important;
  block-size: auto !important;
  overflow: visible !important;
  /* Explicit top alignment */
  align-self: start !important;
}

/* Read More Area */
.latest-news-grid .g-array-item-read-more {
  grid-area: read-more !important;
  position: static !important;
  margin-top: 10px;
  opacity: 1 !important;
  /* Explicit top alignment */
  align-self: start !important;
}

/* Image Area */
.latest-news-grid .g-array-item-image {
  grid-area: image !important;
  align-self: start !important;
}

.latest-news-grid .g-array-item-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Mobile Breakpoint */
@media (max-width: 50.99rem) {
  .latest-news-grid .g-array-item {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "image"
      "title"
      "date"
      "text"
      "read-more" !important;
    row-gap: 1rem;
  }

  .latest-news-grid .g-array-item-image {
    width: 100%;
  }
}

/*  */

.articles-page .article-info {
  display: none;
}

.gallerycolorstrip .koowa_media {
  gap: 1rem !important;
}

.gallery-page .section-horizontal-paddings-small {
  padding: 5% 15% !important;
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content:not(.file) .koowa_media__item__link {
  width: 15vw !important;
  height: auto !important;
  aspect-ratio: 16/14;
}

/*  */

/* 1. The Container Layout */
.title-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}

/* 2. Styling the H1 Title */
.gallery-title h1 {
  margin: 0;
  /* Removes default browser spacing */
  font-weight: normal;
  /* The image font looks elegant, not bold */
  font-size: 32px;
  /* Adjust size to match image */
}

/* 3. Styling the Link */
.title-container p {
  margin: 0;
}

.title-container a {
  text-decoration: none;
  color: black;
  font-size: 20px;
}

.title-container a:hover {
  text-decoration: underline;
}

.gallery-page .k-pagination {
  display: none;
}

.gallery-page .koowa_media>div:nth-child(5) {
  display: none;
}

.gallerycolorstrip .koowa_media {
  justify-content: space-between;
}

/*  */

.c-giving-section {
  background-color: #f4efe5;
  color: var(--dark-blue);
  padding: 3rem 1rem;
  font-family: sans-serif;
  text-align: center;
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

.c-giving-section * {
  box-sizing: border-box;
}

.c-giving-main-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--dark-blue);
  text-transform: capitalize;
}

.c-giving-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.c-giving-option {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Updated for div usage */
.c-giving-header {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 100%;
  transition: opacity 0.2s ease;
  outline: none;
  /* Removes default focus outline - consider adding custom focus style for accessibility */
}

.c-giving-header:hover {
  opacity: 0.8;
}

.c-giving-icon {
  font-size: 3rem;
  color: var(--light-blue);
  margin-bottom: 1rem;
  margin-right: -1rem;
  display: inline-block;
  /* Ensures span respects dimensions */
}

.c-giving-title {
  font-size: 1.75rem;
  color: var(--light-blue);
  font-weight: 700;
  margin: 0 0 1rem 0;
  border-bottom: 2px solid var(--light-blue);
  padding-bottom: 0.25rem;
  display: inline-block;
}

.c-giving-content {
  display: none;
  font-size: 1rem;
  line-height: 1.5;
  padding-top: 1rem;
  animation: fadeIn 0.3s ease-in-out;
}

.c-giving-content p {
  margin-bottom: 1rem;
}

.c-giving-option.is-active .c-giving-content {
  display: block;
}

.c-giving-section .c-link {
  color: var(--red-color);
  text-decoration: none;
  font-weight: 700;
}

.c-giving-section .c-link:hover {
  text-decoration: underline;
}

.c-sub-heading {
  color: var(--red-color);
  font-size: 1.1rem;
  font-weight: 700;
  /* margin: 1.5rem 0 0.5rem; */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 50.99rem) {
  .c-giving-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
  }
}

.c-giving-content {
  padding: 0;
}

/*  */

/* 1. Masking: Ensure the image stays within its box when zooming */
.sols-grid .g-array-item-image {
  overflow: hidden;
  display: block;
  /* Ensures the container behaves as a block for masking */
  /* Optional: Matches common rounded corners if desired, remove if square */
  border-radius: inherit;
}

/* 2. Transition: Smooth animation for the image */
.sols-grid .g-array-item-image img {
  transition: transform 0.5s ease;
  /* Ensure the image fills the mask properly */
  display: block;
  width: 100%;
  height: 100%;
}

/* 3. Hover Effect: Zoom the image when hovering the card */
.sols-grid .g-array-item:hover .g-array-item-image img {
  transform: scale(1.05);
}

/*  */

@media (min-width: 50.99rem) {
  .row-reverse .c-specific-projects-container {
    flex-direction: row-reverse;
  }
}

@media (min-width: 50.99rem) {

  .c-specific-projects-image,
  .c-specific-projects-content {
    flex: 50%;
  }

  .c-specific-projects-image {
    overflow: hidden;
  }

  .c-specific-projects-image img {
    max-height: 500px;
    object-fit: cover;
  }
}

.vocational-stories,
.meet-the-sisters {
  --full-width-margin-neg: -18vw;
}

/*  */

@media (max-width: 50.99rem) {
  #g-footer .footer-logo img {
    width: 75%;
    margin: auto;
    display: grid;
  }

  .site-1-sub:not(.articles-page) #g-mainbar {
    padding: 0 5% !important;
  }

  .copyright {
    padding-top: 0.75rem;
  }

  iframe {
    width: 100% !important;
  }

  .c-text-block,
  .c-image-block {
    width: 100%;
    padding: 0;
  }

  .site-1-sub .g-content-array-pagination {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  .upcoming-events-page.site-1-sub #g-mainbar {
    padding: 0 !important;
  }

  .c-text-section:has(.c-donation-section) {
    padding: 0;
  }

  .quote-container {
    width: var(--full-width);
    margin-left: var(--full-width-margin-neg-mobile);
  }
}

.where-we-serve {
  --full-width-margin-neg: -21vw;
}

.c-locations-worldwide {
  padding: 3rem 0 5rem 0;
}

.lightbox-content img {
  border: none !important;
}

/*  */

.gallery-section {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
  padding: 1rem calc(1vw + 1rem);
  box-sizing: border-box;
}

.gallery-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  width: 100%;
}

.gallery-5 .gallery-item {
  position: relative;
  width: 100%;
  /* aspect-ratio: 1.3 / 1.2; */
  overflow: hidden;
}

.gallery-5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

@media (max-width: 50.99rem) {
  .gallery-5 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .gallery-5::-webkit-scrollbar {
    display: none;
  }

  .gallery-5 .gallery-item {
    flex: 0 0 90%;
    width: 90%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/*  */

.k-ui-namespace .mod_docman .koowa_media--gallery .koowa_media__item,
.k-ui-namespace .koowa_media--gallery .koowa_media__item {
  padding: 3rem 0px;
  border-bottom: 1px solid #d1d1d1;
}

.k-ui-namespace .mod_docman .koowa_media--gallery .koowa_media__item__thumbnail,
.k-ui-namespace .koowa_media--gallery .koowa_media__item__thumbnail {
  box-shadow: var(--default-box-shadow);
}

.ardere-et-lucere .arrow-button.button.no-arrows {
  font-weight: 800;
}

/*  */

/* --- 1. Layout & Dimensions --- */

/* Main Container: Hero height set to 600px */
#module-swiper-163-particle,
#module-swiper-163-particle .swiper-container {
  width: 100% !important;
  height: 600px !important;
  background-color: #000;
  /* Fallback color if image doesn't load */
  position: relative;
  overflow: hidden;
}

/* Wrapper & Slides: Force full size to fill the 600px container */
#module-swiper-163-particle .swiper-wrapper,
#module-swiper-163-particle .slide {
  height: 100% !important;
  width: 100% !important;
}

#module-swiper-163-particle .swiper-slide {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  /* Force slide to corners */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 1;
}

/* Active Slide Visibility */
#module-swiper-163-particle .swiper-slide.swiper-slide-active,
#module-swiper-163-particle .swiper-slide.swiper-slide-duplicate-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2;
}

/* Background Image: Force cover of available space */
#module-swiper-163-particle .swiper-bg {
  position: absolute !important;
  inset: 0 !important;
  /* Ensures it stretches to all edges of the slide */
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  /* Ensures image covers entire area */
  background-position: center center !important;
  z-index: 0;
  filter: brightness(0.5);
  /* Darken image for better text readability */
}

/* --- 2. Content Styling --- */

/* Center text vertically and horizontally */
#module-swiper-163-particle .slide-content-wrapper {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
  z-index: 10;
  padding-bottom: 60px;
  /* Make room for nav arrows at bottom */
}

/* Content container max-width tightened */
#module-swiper-163-particle .slide-content {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Title Styling - UPDATED TO RED */
#module-swiper-163-particle .g-swiper-title {
  color: white !important;
  /* Changed to red */
  font-size: 2.5rem !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  font-weight: bold;
}

/* Paragraph Text Styling */
#module-swiper-163-particle .g-swiper-text {
  color: #fff !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  width: auto !important;
  height: auto !important;
}

/* --- 3. Navigation & Progress --- */

/* Move Nav container to bottom */
#module-swiper-163-particle .swiper-navigation {
  position: absolute;
  width: 100%;
  height: 50px;
  top: auto !important;
  bottom: 10px !important;
  /* Sit just above progress bar */
  left: 0;
  z-index: 50;
}

/* Buttons */
#module-swiper-163-particle .swiper-button-prev-module-163,
#module-swiper-163-particle .swiper-button-next-module-163 {
  position: absolute !important;
  top: 0 !important;
  /* Reset vertical centering */
  transform: none !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  inset: auto !important;
  transition: background 0.3s ease;
}

#module-swiper-163-particle .swiper-button-prev-module-163:hover,
#module-swiper-163-particle .swiper-button-next-module-163:hover {
  background: rgba(255, 255, 255, 0.4);
}

#module-swiper-163-particle .swiper-button-prev-module-163 {
  left: 20px !important;
}

#module-swiper-163-particle .swiper-button-next-module-163 {
  right: 20px !important;
}

#module-swiper-163-particle .swiper-navigation i {
  color: #fff;
  font-size: 20px;
}

/* Progress Bar Track */
#module-swiper-163-particle .swiper-pagination-progressbar {
  background: rgba(255, 255, 255, 0.2) !important;
  height: 5px !important;
  bottom: 0 !important;
  top: auto !important;
}

/* Progress Bar Fill - RED Color */
#module-swiper-163-particle .swiper-pagination-progressbar-fill {
  background: #a12b23 !important;
}

/* --- 4. Mobile Responsiveness --- */

@media (max-width: 50.99rem) {

  #module-swiper-163-particle,
  #module-swiper-163-particle .swiper-container {
    height: 400px !important;
  }

  #module-swiper-163-particle .g-swiper-title {
    font-size: 1.5rem !important;
  }

  #module-swiper-163-particle .g-swiper-text {
    font-size: 1rem !important;
  }

  /* Hide arrows on mobile */
  #module-swiper-163-particle .swiper-navigation {
    display: none !important;
  }

  #module-swiper-163-particle .slide-content-wrapper {
    padding-bottom: 0;
  }
}

/*  */

.full-width-section {
  width: var(--full-width);
  margin-left: var(--full-width-margin-neg);
}

@media (min-width: 50.99rem) {
  .c-testimonial-content {
    margin-right: 0;
  }
}

.vocational-stories .c-specific-projects-content .button,
.passion-for-education .c-specific-projects-content .button {
  background-color: var(--button-blue);
  color: white;
  border: none;
}

@media (max-width: 50.99rem) {
  .vocational-stories .gallery-section {
    margin-left: var(--full-width-margin-neg-mobile);
  }
}

.passion-for-education .c-spiritual-life-section::after {
  background-color: rgba(0, 0, 0, 0.75);
}


/*  */

/* Scoped Element Class */
.circle-stages {
  /* Color Palette */
  --red-color: #9d0c02;
  --dark-blue: #2f4450;
  --light-blue: #568194;
  --footer-blue: #002d41;
  --light-green: #a7baaf;
  --orange: #f0842e;
  --button-blue: #1b4e6b;
  --blue-green: #50858d;
  --tan-color: #f2d8b2;
}

/* Container Layout */
.circle-stages .stages-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
  width: 100%;
  position: relative;
  /* Needed for the background line positioning */
  margin: 3rem 0 0 0;
}

/* The Progression Line (Desktop) */
.circle-stages .stages-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0rem;
  right: 0rem;
  height: 4px;
  background-color: #b2bfc5;
  transform: translateY(-50%);
  z-index: 0;
  /* Sits behind the circles */
}

/* Circular Stage Items */
.circle-stages .stage-item {
  /* Responsive Sizing Logic */
  flex: 1 1 0;
  /* Allows items to shrink equally */
  width: 100%;
  /* Take available flex space */
  max-width: 15rem;
  /* Do not exceed original size */
  aspect-ratio: 1 / 1;
  /* Keeps it a perfect circle regardless of width */
  block-size: auto;
  /* Reset base style */
  height: auto;
  /* Reset base style */

  border-radius: 50%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* Sits on top of the line */

  /* Decoration */
  /* border: 4px solid var(--red-color); */
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.5);
  background-color: var(--dark-blue);
  /* Fallback color */

  cursor: pointer;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

  /* Background Image handling */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hover Effect for Stage Item */
.circle-stages .stage-item:hover {
  border-color: var(--orange);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Content Overlay */
.circle-stages .stage-content {
  position: absolute;
  inset: 0;
  /* Dark overlay per instructions */
  background-color: rgba(47, 68, 80, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  /* Reduced padding for smaller screens */
  text-align: center;
  opacity: 1;
}

/* Heading Styling */
.circle-stages h3 {
  border: none;
  margin: 0;
  color: #ffffff;
  /* Use responsive font size so it fits in smaller circles */
  font-size: clamp(0.8rem, 2vw, 1.5rem);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  word-break: break-word;
  /* Prevents text overflow */
}

/* Mobile Breakpoint */
@media (max-width: 50.99rem) {
  .circle-stages .stages-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  /* Rotate the progression line to be vertical on mobile */
  .circle-stages .stages-container::before {
    width: 4px;
    height: 100%;
    /* Span full height */
    top: 0;
    left: 50%;
    /* Center horizontally */
    right: auto;
    transform: translateX(-50%);
    /* Center alignment */
  }

  .circle-stages .stage-item {
    /* Reset to rounded rectangle or larger circle on mobile if desired */
    /* Instructions implied "stack", but keeping them circular or 
       card-like is optional. Keeping them responsive circles here: */
    width: 100%;
    max-width: 20rem;
    border-radius: 1rem;
    /* Rounded card shape looks better for stacked text */
    aspect-ratio: auto;
    /* Remove fixed aspect ratio for cards */
    min-height: 15rem;
    /* Ensure enough height */
  }

  .circle-stages h3 {
    font-size: 1.5rem;
    /* Restore larger font on mobile cards */
  }
}

.vocational-stories .eapps-widget {
  width: 100%;
}

.quote-content {
  width: 100%;
}

/*  */

.our-charism-page #g-mainbar .text-section-2 {
  position: relative;
  z-index: 100;
}

.site-1-sub #g-mainbar span,
.site-1-sub #g-mainbar p {
  line-height: 1.5;
}

.c-donation-container.right-images {
  flex-direction: row;
}

.foundress-page .c-donation-container h3,
.founding-page-2 .c-donation-container h3,
.death-of-mother-elisabetta .c-donation-container h3 {
  color: white !important;
  background-color: var(--button-blue);
  width: fit-content;
  font-weight: bold;
  padding: 0.5rem 2rem;
  border-bottom: none;
  margin-bottom: 1rem;
  font-size: var(--mid-font) !important;
}

.foundress-page .c-testimonial-block,
.founding-page-2 .c-testimonial-block {
  background-color: var(--tan-color);
  color: var(--blue-color);
}

.foundress-page .c-testimonial-block .c-testimonial-source,
.founding-page-2 .c-testimonial-block .c-testimonial-source,
.foundress-page .c-quote-author {
  color: var(--dark-blue);
  font-weight: bold;
}

.foundress-page .c-testimonial-btn,
.founding-page-2 .c-testimonial-btn {
  color: white;
  background-color: var(--button-blue);
  text-decoration: none;
  padding: 12px 30px;
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  max-width: fit-content;
  transition: all 0.3s ease;
  font-size: clamp(1rem, 1vw, 1.2rem);
}

/*  */

.c-spiritual-life-heading {
  font-family: "Dancing Script", cursive;
}

/*  */

:is(.founding-page-2, .foundress-page) .c-testimonial-btn:hover {
  background-color: var(--light-blue);
}

.c-testimonial-btn {
  font-size: clamp(1rem, 1vw, 1.2rem);
  padding: 12px 30px;
}

/*  */

.blue-heading {
  color: white !important;
  background-color: var(--button-blue);
  width: fit-content;
  font-weight: bold;
  padding: 0.5rem 2rem;
  border-bottom: none;
  margin-bottom: 1rem;
  font-size: var(--mid-font);
}

/*  */

.c-prayer-card__relic {
  padding: 2rem;
}

.c-prayer-card {
  box-shadow: var(--default-box-shadow);
  background-color: #364958;
}

@media (min-width: 50.99rem) {
  .c-prayer-card--fullwidth {
    width: 70vw;
    margin-left: -10vw;
    position: relative;
  }

  .c-prayer-card__relic {
    width: 60%;
  }

}

.c-prayer-card,
.c-prayer-card__prayer {
  background-color: var(--tan-color);
  color: var(--dark-blue);
}

.c-prayer-card__text p:first-child span,
.c-prayer-card__text p:first-child {
  font-family: "Dancing Script", cursive;
  font-weight: bold;
  font-size: 34px;
}

/*  */

.our-foundress .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/OLS_1744%20copy-2.jpg");
}

/*  */

/* Scope Variables */
.vocation-stories {
  --gold-color: #8e4c22;
  --button-color: #8e4c22;
  --overlay-color: rgba(142, 76, 34, 0.3);
}

.vocation-stories a.button::after {
  content: "";
  display: grid;
  width: 1rem;
  height: auto;
  aspect-ratio: 1.2/1;
  background: url(/images/template/double-arrows-marker-felt-whites.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s ease-in;
}

/* 1. Ensure Card Height Matches Neighbors */
/* This chain ensures the card expands to the full height of the row */
.vocation-stories,
.vocation-stories .g-content,
.vocation-stories .g-content-array,
.vocation-stories .g-grid,
.vocation-stories .g-block,
.vocation-stories .g-array-item {
  height: 100%;
}

.vocation-stories .g-grid {
  aspect-ratio: 1 / 1.25;
}

/* 2. Container Setup */
.vocation-stories .g-content {
  position: relative;
  /* Anchor for the absolute title */
  padding: 0;
  margin: 0;
}

/* 3. Main Title ("Vocation Stories") */
/* Moved from outside the card to inside, absolute position */
.vocation-stories .g-title {
  display: block;
  position: absolute;
  left: 0;
  top: 1rem;
  width: 80%;
  z-index: 9;
  text-align: center;
  color: #fff !important;
  /* Override default red */
  font-size: clamp(1.25rem, 1.25vw, 2rem) !important;
  font-weight: 700;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  margin: 0 10%;
  padding: 1rem 1rem 1rem 1rem;
  border: none;
  background: transparent;
  line-height: 1;
  height: auto;
  /* Reset fixed height from base styles */
  border-bottom: 7px solid var(--gold-color);
}

/* 4. Subtitle ("Sr. Liza Catherine") */
.vocation-stories .g-array-item-title {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  z-index: 9;
  text-align: center;
  height: auto;
}

.vocation-stories .g-array-item-title a {
  color: white;
  font-size: clamp(1rem, 1.25vw, 1.75rem) !important;
  pointer-events: none;
}

.vocation-stories .g-array-item-title h3 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  border: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Remove default lines from subtitle if present */
.vocation-stories .g-array-item-title h3::after {
  display: none;
}

/* 5. Card Body & Background */
.vocation-stories .g-array-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Pushes content to bottom */
  background-color: #2f4450;
  overflow: hidden;
  border: none;
}

/* Image Setup */
.vocation-stories .g-array-item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0;
}

.vocation-stories .g-array-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Dark Overlay (Tint) */
.vocation-stories .g-array-item-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color);
  z-index: 2;
}

/* 6. Text Description */
.vocation-stories .g-array-item-text {
  position: relative;
  z-index: 9;
  color: #fff;
  text-align: center;
  font-size: 1rem !important;
  line-height: 1.4;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
  /* Space between text and button */
  /* Auto margin pushes it down towards the button */
  margin-top: auto;
  bottom: 15%;
}

/* 7. Footer Button */
.vocation-stories .g-array-item-read-more {
  position: relative;
  background-color: var(--button-color);
  z-index: 9;
  width: 100%;
  bottom: 7%;
  margin: 0;
  /* Remove margins to align with card bottom */
  transform: scale(1.0);
  transition: all 0.3s ease;
}

.vocation-stories .g-array-item-read-more .button {
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: var(--small-font) !important;
  border: none;
  text-decoration: none;
  transition: background 0.2s;
  border-radius: 0;
  display: flex;
  gap: 1rem;
  width: fit-content;
  margin: auto;
  padding: 1rem 1.5rem;
  font-weight: 500;
}

.vocation-stories .g-array-item-read-more:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* Clean up links */
.vocation-stories a {
  text-decoration: none;
}

.vocation-stories a.button {
  display: flex;
  gap: 1rem;
  width: fit-content;
  margin: auto;
  padding: 1rem 1.5rem;
  font-weight: 500;
}

/*  */

@media (max-width: 50.99rem) {
  .site-1-home #g-expanded>.g-container>.g-grid {
    grid-template-columns: 1fr !important;
  }
}

.the-eucharist .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/DSC_2490.jpg");
}

.jesus-crucified .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/Prayer.JPG");
}

@media (min-width: 50.99rem) {
  .the-miracle .c-prayer-card__relic {
    width: 38%;
  }

  .the-miracle .c-prayer-card--fullwidth {
    width: 65vw;
    margin-left: -3vw;
    position: relative;
  }
}

.the-miracle .c-prayer-card__relic {
  justify-content: center;
  align-items: center;
}

.the-miracle .c-prayer-card__text p:first-child span,
.c-prayer-card__text p:first-child {
  font-size: 10pt !important;
  font-family: var(--body-font-family) !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
}

.the-miracle .c-prayer-card__relic img {
  max-height: 750px;
}

.the-miracle .c-prayer-card {
  width: 100%;
  max-width: 1030px;
  /* Keeps the original size cap */
  height: auto;
  /* overrides fixed height */
  margin: 0 auto;
  /* Centers the card horizontally */
  inset: auto;
  /* Resets positioning offsets */
  inline-size: 100%;
  max-inline-size: 1030px;
  block-size: auto;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.map-box {
  padding: 3rem 1rem;
  width: 70%;
  margin: auto;
  background-color: #f4efe5;
}

/*  */

.our-foundress .c-spiritual-life-section::after {
  background-color: rgba(0, 0, 0, 0.75);
}

/*  */


/* --- Layout Overrides --- */
.gallery-container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  height: auto !important;
}

.gallery-container .image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100% !important;
  max-width: none !important;
}

.gallery-container .image-container {
  position: relative;
  flex: 1 1 300px;
  width: auto !important;
  max-width: none !important;
  padding-bottom: 0 !important;
  min-height: 300px;
  overflow: hidden;
}

.gallery-container .image-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* --- Conditional Hover Overlay & Tooltip --- */

/* We chain [data-tooltip]:not([data-tooltip=""]) to ensure 
   these elements are only created if text exists.
*/

/* Dark Overlay */
.gallery-container .image-container[data-tooltip]:not([data-tooltip=""])::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Text Layer */
.gallery-container .image-container[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Hover States */
.gallery-container .image-container:hover img {
  transform: scale(1.05);
}

/* Only trigger opacity change if the tooltip is valid */
.gallery-container .image-container[data-tooltip]:not([data-tooltip=""]):hover::before,
.gallery-container .image-container[data-tooltip]:not([data-tooltip=""]):hover::after {
  opacity: 1;
}

/* --- Mobile Breakpoint --- */
@media (max-width: 50.99rem) {
  .gallery-container .image-row {
    flex-direction: column;
  }

  .gallery-container .image-container {
    flex: auto;
    width: 100% !important;
    min-height: 250px;
  }
}

/*  */

.jesus-crucified .c-inspiration-quote {
  padding: 0 !important;
}

/*  */

.prayer-life-page .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/DSC_2490.jpg");
}

/*  */

.community-life .arrow-button:hover::after,
.community-life .arrow-button::after {
  display: none;
}

/*  */

.gallery-section img:hover {
  transform: scale(1.05);
}

/*  */

.c-schedule-section {
  position: relative;
}

.c-schedule-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 150vw;
  background-color: #fcfbf7;
  transform: translate(-22vw);
}

.c-schedule-container {
  z-index: 5;
  position: relative;
}

/*  */

.a-day-in-our-life .arrow-button:hover::after,
.a-day-in-our-life .arrow-button::after {
  display: none;
}

/*  */

.meet-the-sisters .quote-container,
.vocational-stories .quote-container {
  background-color: #f3efe6;
  padding: 2rem;
}

/*  */

.no-arrows:hover::after,
.no-arrows::after {
  display: none;
}

/*  */

.blue-banner-section>div {
  width: fit-content;
  margin: auto;
}

/*  */

/* --- Grid Layout System --- */
.gallery-page .koowa_media {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem 2rem;
  width: 100% !important;
  margin: 0 !important;
}

/* --- Card Wrapper (The Main Mask) --- */
.gallery-page .koowa_media__item__link {
  display: flex !important;
  flex-direction: column;
  background-color: #ffffff;
  border: none !important;
  /* Use overflow: hidden on the CARD to clip the zoomed image edges */
  overflow: hidden !important;
  border-radius: 0 !important;
  /* Keeping corners sharp as requested */
  box-shadow: none !important;
  text-decoration: none;
  transition: box-shadow 0.3s ease;
  position: relative;
  padding: 0 !important;
}

/* --- Content Container (Reordering & Stacking) --- */
.gallery-page .overflow_container {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  /* Visible here so z-index works */
  position: relative;
}

/* --- 1. Hide Folder Icon --- */
.gallery-page .k-icon-document-folder {
  display: none !important;
}

/* --- 2. Image (Top, 4:3, Zoom, Layered Bottom) --- */
.gallery-page .koowa_media__item__link img {
  order: -1 !important;
  /* Visually moves image to top */
  width: 100% !important;
  /* Enforce 4:3 Aspect Ratio */
  aspect-ratio: 16 / 12 !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease;
  transform-origin: center center;
  /* Layering: Sit behind the text */
  position: relative;
  z-index: 1;
  max-width: none !important;
  background-color: #f3f4f6;
}

/* Hover Effect: Scale Image */
.gallery-page .koowa_media__item__link:hover img {
  transform: scale(1.1);
}

/* --- 3. Title (Bottom, White Background Mask) --- */
.gallery-page .overflow_container>span:not(.k-icon-document-folder) {
  order: 2 !important;
  /* Visually moves text to bottom */
  display: block;
  width: 100% !important;
  /* Background matches card to mask the image sliding underneath */
  background-color: #ffffff;
  /* Layering: Sit on top of the image */
  position: relative;
  z-index: 10;
  text-align: center !important;
  font-size: 1.35rem !important;
  font-weight: normal !important;
  color: #000000;
  line-height: 1.2;
  padding: 1.25rem 0.5rem 0.5rem 0.5rem !important;
  /* Padding for spacing */
}

/* --- Layout Cleanups --- */
.gallery-page .koowa_media__item,
.gallery-page .koowa_media__item__content,
.gallery-page .koowa_header,
.gallery-page .koowa_header__item,
.gallery-page .koowa_wrapped_content,
.gallery-page .whitespace_preserver {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* --- Mobile Styles --- */
@media (max-width: 50.99rem) {
  .gallery-page .koowa_media {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 5%;
  }
}

/*  */

.community-life .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/OLS_4832%20copy.jpg");
}

/*  */

.catechesis-and-evangelization .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/OLS_5125.jpg");
}

/*  */

#g-footer .footer-logo img {
  width: 35%;
  margin: auto;
  display: grid;
}

/*  */

.death-of-mother-elisabetta .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/OLS_1744%20copy-2.jpg");
}

.death-of-mother-elisabetta .c-spiritual-life-section::after {
  background-color: rgba(0, 0, 0, 0.8);
}

/*  */

/* Scoped CSS for prayer-card-2 */

/* Main Section Background */
.prayer-card-2 {
  background-color: #f4efe5;
  /* Warm beige match */
  padding: 60px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #1f3c52;
  /* Dark slate blue text match */
  line-height: 1.6;
  box-sizing: border-box;
}

/* Centered Container */
.prayer-card-2 .prayer-card-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  /* Space between image and text */
  align-items: center;
}

/* Image Column */
.prayer-card-2 .prayer-card-image {
  flex: 0 0 325px;
  /* Fixed width for portrait */
}

.prayer-card-2 .prayer-card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  /* Slight softening of edges */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Text Column */
.prayer-card-2 .prayer-card-text {
  flex: 1;
  /* Takes up remaining space */
  /* padding-top: 10px; */
  max-width: 420px;
}

/* Intro Text Style */
.prayer-card-2 .prayer-intro {
  font-size: 0.9rem;
  margin-bottom: 30px;
  font-weight: 500;
}

/* Heading Style */
.prayer-card-2 .prayer-heading {
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: #102a3d;
  /* Slightly darker for contrast */
  border-bottom: 2px solid rgba(31, 60, 82, 0.2);
  /* Optional decorative line */
  padding-bottom: 10px;
  display: inline-block;
}

/* Prayer Body Style */
.prayer-card-2 .prayer-body p {
  font-size: 1rem;
  font-style: italic;
  /* Distinct style for the prayer itself */
  margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .prayer-card-2 .prayer-card-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .prayer-card-2 .prayer-card-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 350px;
    margin-bottom: 30px;
  }

  .prayer-card-2 .prayer-heading {
    display: block;
  }
}

/* Breakout section to full viewport width */
.prayer-card-2 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* Ensure inner content remains centered */
.prayer-card-2 .prayer-card-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  justify-content: center;
}

/* Mobile Breakpoint */
@media (max-width: 50.99rem) {

  /* Reset fixed heights from base styles */
  .prayer-card-2,
  .prayer-card-2 .prayer-card-container,
  .prayer-card-2 .prayer-card-text {
    height: auto;
    block-size: auto;
  }

  /* Stack layout */
  .prayer-card-2 .prayer-card-container {
    flex-direction: column;
    text-align: center;
  }

  /* Adjust image column */
  .prayer-card-2 .prayer-card-image {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .prayer-card-2 .prayer-card-image img {
    max-width: 100%;
    height: auto;
  }

  /* Adjust text column */
  .prayer-card-2 .prayer-card-text {
    width: 100%;
    inline-size: auto;
  }
}

/*  */

.a-day-in-our-life .c-specific-projects-content .arrow-button,
.meet-the-sisters .quote-container .arrow-button,
.vocation-stories .arrow-button,
.vocation-stories .c-specific-projects-content .button {
  text-decoration: none;
  font-size: clamp(1rem, 1vw, 1.2rem);
  font-weight: 600;
  font-family: var(--title-font-family);
  display: inline-block;
  font-weight: bold;
  text-align: center;
  min-width: 180px;
  padding: 1rem 1.5rem;
  margin: auto;
  display: grid;
}

.site-1-sub .arrow-button {
  font-weight: 600;
  font-size: clamp(1rem, 1vw, 1.2rem);
}

/*  */

section.wavy-background .c-inspiration-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1000px;
}

/*  */

.foundress-page .c-quote-with-image img {
  width: 100%;
  height: 100%;
  max-height: 750px;
  /* Requested max-height */
  object-fit: cover;
  block-size: auto;
  object-position: center 5%;
}

/*  */

.foundress-page .partner-container a {
  font-size: 14px;
}

.foundress-page .partner-container .white-arrow-button::after {
  display: none !important;
}

/*  */

.vocational-stories .arrow-button {
  text-decoration: none;
  font-size: clamp(1rem, 1vw, 1.2rem);
  font-weight: 600 !important;
  font-family: var(--title-font-family);
  display: inline-block;
  font-weight: bold;
  text-align: center;
  min-width: 180px;
  padding: 1rem 1.5rem;
  margin: auto;
  display: grid;
  border: 2px solid var(--button-blue);
}

/*  */

.side-by-side-images {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  height: 500px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);
  overflow: hidden;
}

.side-by-side-images .image-container {
  flex: 1;
  width: 50%;
  padding-bottom: 0 !important;
  height: 100%;
}

.side-by-side-images .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*  */

.donate-page .c-spiritual-life-section::before {
  background-image: url("/images/stories/template/l9996001-version-2-copy-5.jpg");
}

/*  */

.latest-news-page #g-mainbar,
.videos-page #g-mainbar {
  background-color: #fcfbf7;
}

/*  */

/* --- Container Resets --- */
.upcoming-events .g-grid,
.upcoming-events .g-block,
.upcoming-events .g-content,
.upcoming-events .g-array-item {
  height: auto !important;
  block-size: auto !important;
  width: 100% !important;
  inline-size: 100% !important;
  transform: none !important;
  perspective: none !important;
  margin: 0 !important;
}

/* --- Item Wrapper (The Row) --- */
.upcoming-events .g-grid {
  border-bottom: 1px solid #d1d1d1;
  margin-bottom: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Last item gets 6rem bottom padding */
.upcoming-events .g-grid:last-child {
  border-bottom: none;
  margin-bottom: 0 !important;
  padding-bottom: 5rem !important;
}

.upcoming-events {
  padding-top: 3rem !important;
}

/* --- The Grid Layout --- */
.upcoming-events .g-array-item {
  position: relative;
  display: grid;
  grid-template-columns: 35% 1fr;
  grid-template-rows: min-content min-content 1fr min-content;
  gap: 0.5rem 2rem;
  grid-template-areas:
    "image title"
    "image details"
    "image text"
    "image button";
  align-items: start;

  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;

  transition: transform 0.3s ease-out !important;
  transform-origin: center center;
}

/* HOVER: Scale the whole item */
.upcoming-events .g-array-item:hover {
  transform: scale(1.03) !important;
  z-index: 10;
  cursor: pointer;
}

/* --- Image Styling --- */
.upcoming-events .g-array-item-image {
  grid-area: image;
  height: auto !important;
  block-size: auto !important;
}

.upcoming-events .g-array-item-image img {
  width: 100% !important;
  inline-size: 100% !important;
  height: auto !important;
  block-size: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* --- Title Styling --- */
.upcoming-events .g-array-item-title {
  grid-area: title;
  height: auto !important;
  block-size: auto !important;
}

.upcoming-events .g-item-title {
  margin: 0;
  border: none !important;
  font-size: 1.5rem !important;
  line-height: 1.2;
  font-weight: 400;
  font-weight: bold;
}

.upcoming-events .g-item-title a,
.upcoming-events .g-item-title a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
  color: #222 !important;
}

/* Stretched Link */
.upcoming-events .g-item-title a::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: 1;
}

/* --- Date/Details Styling --- */
.upcoming-events .g-array-item-details {
  grid-area: details;
  height: auto !important;
  block-size: auto !important;
  margin-bottom: 0.5rem;
}

.upcoming-events .g-array-item-date {
  color: #4a7a8c;
  font-size: 0.95rem;
}

/* --- Description Text Styling --- */
.upcoming-events .g-array-item-text {
  grid-area: text;
  height: auto !important;
  block-size: auto !important;
  font-size: 0.85rem !important;
  line-height: 2;
  color: #000000;
  margin-bottom: 1rem;
}

/* --- Read More Button Styling --- */
.upcoming-events .g-array-item-read-more {
  grid-area: button;
  height: auto !important;
  block-size: auto !important;
  justify-self: end;
  position: relative;
  padding-right: 1rem;
}

.upcoming-events .g-array-item-read-more .button {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  inline-size: auto !important;
  color: #1f4e68 !important;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: none;
  text-decoration: none !important;
}

/* --- Pagination & Extras --- */
.latest-news-page .g-content-array-pagination {
  padding-bottom: 3rem;
}

.latest-news-page .pagination-button {
  background-color: var(--button-blue);
  color: white;
  border: none;
  font-weight: 800;
  font-size: clamp(1rem, 1vw, 1.2rem);
}

.latest-news-page .pagination-button:hover {
  background-color: var(--button-blue);
  color: white;
  border: none;
  font-weight: 800;
  font-size: clamp(1rem, 1vw, 1.2rem);
  background-color: var(--light-blue);
  transform: scale(1.05);
}

/* --- Mobile Breakpoint (UPDATED) --- */
@media (max-width: 50.99rem) {

  /* Reduce space between items on mobile */
  .upcoming-events .g-grid {
    margin-bottom: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Adjust last item padding for mobile */
  .upcoming-events .g-grid:last-child {
    padding-bottom: 4rem !important;
  }

  .upcoming-events .g-array-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "details"
      "image"
      "text"
      "button";
    gap: 0.5rem;
    /* Tighter internal gap */
  }

  .upcoming-events .g-array-item-image img {
    aspect-ratio: 16 / 9;
  }

  /* Make fonts smaller on mobile */
  .upcoming-events .g-item-title {
    font-size: 1.25rem !important;
    /* Smaller title */
  }

  .upcoming-events .g-array-item-text {
    font-size: 0.8rem !important;
    /* Smaller body text */
    margin-bottom: 0.5rem;
  }
}

/*  */

.foundress-page section .upcoming-events {
  display: none;
}

.foundress-page section .upcoming-events:has(.g-array-item) {
  display: initial;
}

/*  */

.ardere-et-lucere .c-testimonial-wrapper {
  gap: 0;
  max-width: 1100px;
}

.ardere-et-lucere .c-testimonial-quote {
  margin-bottom: 0;
}

/*  */

.gallery-page .overflow_container:has(.js-gallery-caption) {
  display: none !important;
}

.gallery-page .koowa_media:has(.js-gallery-caption) {
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 50.99rem) {
  .gallery-page .koowa_media:has(.js-gallery-caption) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*  */

.upcoming-events-page [itemprop="articleBody"] {
  padding: 0 10% !important;
  background-color: #fcfaf6;
}

/*  */

.contact-us-page .partner-container a {
  font-size: 14px;
}

.contact-us-page .partner-container .white-arrow-button::after {
  display: none !important;
}

/*  */

/* Container must be relative for the absolute child to position correctly */
section.beige-background {
  position: relative;
  z-index: 2;
}

/* Ensure content sits on top of the background */
section.beige-background div,
section.beige-background h2 {
  position: relative;
  z-index: 2;
}

section.beige-background::after {
  /* Background Image Setup */
  background-color: #f4efe5;

  /* Absolute Positioning */
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  content: '';
  width: 125vw;
  max-width: 125vw;
  inline-size: 125vw;
  max-inline-size: 125vw;
  right: auto;
  left: 0;
  margin-left: calc(50% - 62.5vw);
  margin-right: calc(50% - 62.5vw);
  margin-inline-start: calc(50% - 62.5vw);
  margin-inline-end: calc(50% - 62.5vw);
}

/*  */

.vocation-retreats-page .upcoming-events .g-array-item-read-more {
  justify-self: start;
}

/*  */

.vocation-retreats-page .upcoming-events .g-array-item-read-more {
  justify-self: start;
  padding-bottom: 1rem;
}

.vocation-retreats-page .upcoming-events .g-item-title {
  padding-top: 1rem;
}

@media (min-width: 50.99rem) {
  .upcoming-events .g-array-item {
    grid-template-columns: 37% 1fr;
  }
}

/*  */

/* 1. Force grid items to stretch to the tallest column */
.upcoming-events .g-array-item {
  align-items: stretch;
  grid-template-rows: auto auto 1fr auto;
  /* Rows adapt to content height */
}

/* 2. Make the anchor tag filling the image wrapper */
.upcoming-events .g-array-item-image a {
  display: block;
  height: 100%;
}

/* 3. Scale image to fill the container without distorting */
.upcoming-events .g-array-item-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}

/* 4. Add the requested spacing */
.upcoming-events .g-array-item-title {
  padding-top: 1rem;
}

.upcoming-events .g-array-item-read-more {
  padding-bottom: 1rem;
}

/* Mobile: Reset image scaling so it doesn't stretch in a stack */
@media (max-width: 50.99rem) {
  .upcoming-events .g-array-item-image img {
    height: auto;
    aspect-ratio: 16/9;
    /* Optional: maintains a nice shape on mobile */
  }

  .upcoming-events .g-array-item-title,
  .upcoming-events .g-array-item-read-more {
    padding-block: 1rem;
  }

  .latest-news-page .upcoming-events {
    padding-top: 0 !important;
  }
}

/*  */

.vocation-stories .g-grid {
  display: flex;
  flex-wrap: nowrap;
  /* Prevents wrapping on large screens */
}

/*  */

@media (max-width: 50.99rem) {

  #module-swiper-163-particle .slide-content {
    padding: 0 !important;
  }

  #module-swiper-163 .g-swiper-slider {
    height: 100%;
  }

}

/*  */

.site-1-home .fullwidth-swiper .swiper-slide img {
  object-position: top !important;
}

/*  */