:root {
  --prp-blue:#2E71B5;
  --prp-gold:#F8AE07;
  --prp-dark:#2C2C2C;
}

@font-face {
    font-family: 'Caros Soft';
    src: url('../fonts/CarosSoftLight.woff2') format('woff2'),
         url('../fonts/CarosSoftLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Caros Soft';
    src: url('../fonts/CarosSoft.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Caros Soft';
    src: url('../fonts/CarosSoftBold.woff2') format('woff2'),
         url('../fonts/CarosSoftBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

body{ 
  background-color: #F4F4F4 !important;
  font-family: "Caros Soft", sans-serif !important;
}

.wc--bg-dark {
  background-color: var(--prp-dark);
}

.wc--bg-primary {
  background-color: var(--prp-blue);
}
.wc--bg-secondary {
  background-color: var(--prp-gold);
}
.wc--bg-white {
  background-color: white;
}

.wc--br-regular {
  border-radius: 20px;
}

.wc--text-white {
  color:white;
}
.wc--text-dark{
  color: var(--prp-dark);
}
.wc--text-primary{
  color: var(--prp-blue);
}
.wc--text-secondary{
  color: var(--prp-gold);
}
.wc--fw-600 {
  font-weight: 600;
}
.wc--fw-700 {
  font-weight: 600;
}

.br-curved-regular {
  border-radius: 20px;
}





.wc--heading-xl {
  font-family: "Caros Soft", sans-serif;
  font-weight: 600;
  font-size: 3.5rem;
}
.wc--heading-lg {
  font-family: "Caros Soft", sans-serif;
  font-size: 2rem;
  font-weight: 600;
}

.wc--heading-md {
  font-family: "Caros Soft", sans-serif;
  font-size: 1.5rem;
}

.wc--heading-sm {
  font-family: "Caros Soft", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}

.image-text-block h3 strong {
  font-weight: 600;
  
}
.image-text-block.highlight-primary h3 strong {
  color: var(--prp-blue);
}
.image-text-block.highlight-secondary h3 strong {
  color: var(--prp-gold);
}

.wc--large-body {
  font-family: "Caros Soft", sans-serif;
  font-size: 1.2rem;
}

.wc--body {
  font-family: "Caros Soft", sans-serif;
  font-size: 1.1rem;
}

.top-nav a:hover {
color: var(--prp-blue);
transition: .2s;
}

.top-nav a.active {
color: var(--prp-gold);
}

.top-nav .menu-pill:hover {
  color: white;
  background: var(--prp-gold);
  transition: .2s;
}

.container {
  max-width: 1500px !important;
}
.container.slim {
  max-width: 1300px !important;
}
.container.slimmest {
  max-width: 1100px !important;
}
.w-75 {
  width: 75%;
}

.logo {
  max-width: 160px;
}




/* START BUTTONS */

.wc--btn {
  border-radius: 99rem;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  font-family: "Caros Soft", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

.wc--btn:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Soft box shadow on hover */
}

.wc--btn-primary {
  background: var(--prp-dark);
  color: white;
}

.wc--btn-white-hover:hover {
  background: white;
  color: var(--prp-blue);
  transition: .2s;
}
.wc--btn-blue-hover:hover {
  color: white;
  background: var(--prp-blue);
  transition: .2s;
}

.wc--btn-secondary {
  background: var(--prp-gold);
  color: white;
}

.top-nav .menu-pill {
  border-radius: 99rem;
  background: var(--prp-blue);
  font-size: 1.2rem;
  padding: .75rem 1.85rem;
  font-family: "Caros Soft", sans-serif;
  font-weight: 600;
  text-decoration: none;
  color: white
}

/* END BUTTONS */

/* START PROMO BOXES */

.promo-box {
  /* aspect-ratio: 2/1.5; */
  text-decoration: none;
  color: white;
  position: relative;
  transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

.promo-box .circle {
  position: absolute;
  width: 290px;
  height: 290px;
  background-color: white;
  opacity: 50%;
  border-radius: 50%;
  bottom: -40%;
  right: -27%;
  z-index: 0;
  transition: transform 0.3s ease; /* Smooth scale transition */
}
.promo-box:hover {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); /* Soft box shadow on hover */
}
.promo-box:hover .circle {
  transform: scale(1.1); /* Slightly grow on hover */
}

.promo-box:hover p{
  color: white;
}

/* END PROMO BOXES */

.section {
  margin-bottom: 100px;
}
@media (max-width: 767px) {
  .section {
    margin-bottom: 75px;
  }
}
.opportunity-list .opportunity {
  border-bottom: 1px solid var(--prp-dark);
}

.opportunity-list .opportunity:first-of-type {
  border-top: 1px solid var(--prp-dark);
}

.filter {
  border-radius: 99rem;
}

select#type {
    background: var(--prp-blue);
    padding: 1rem;
    border-radius: 99rem;
}
.filter .btn-group {
  border-radius: 4px;
}
.filter .btn-group button {
  color: white!important;
}

.filter .btn-group button::after {
    content: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8577 2.0451L7.92016 7.9826C7.86502 8.03781 7.79954 8.0816 7.72746 8.11148C7.65538 8.14136 7.57811 8.15674 7.50009 8.15674C7.42206 8.15674 7.3448 8.14136 7.27272 8.11148C7.20063 8.0816 7.13515 8.03781 7.08001 7.9826L1.14251 2.0451C1.0311 1.93369 0.968506 1.78258 0.968506 1.62502C0.968506 1.46747 1.0311 1.31636 1.14251 1.20495C1.25392 1.09353 1.40503 1.03094 1.56259 1.03094C1.72015 1.03094 1.87125 1.09353 1.98266 1.20495L7.50009 6.72311L13.0175 1.20495C13.0727 1.14978 13.1382 1.10602 13.2102 1.07617C13.2823 1.04631 13.3596 1.03094 13.4376 1.03094C13.5156 1.03094 13.5929 1.04631 13.6649 1.07617C13.737 1.10602 13.8025 1.14978 13.8577 1.20495C13.9128 1.26011 13.9566 1.3256 13.9864 1.39768C14.0163 1.46976 14.0317 1.54701 14.0317 1.62502C14.0317 1.70304 14.0163 1.78029 13.9864 1.85237C13.9566 1.92445 13.9128 1.98994 13.8577 2.0451Z' fill='white' stroke='white'/%3E%3C/svg%3E%0A") !important;
    display: inline-block;
    margin-left: .255em;
    content: "";
}


/* START HEADER STYLES */

.default header {
  background: white;
}
.default header .circle-left {
  background: var(--prp-gold);
}
.default header .circle-right{
  background: var(--prp-blue);
}
.default header h1, .default header p{
  color: var(--prp-dark);
}



.opportunities header {
  background: var(--prp-blue);
}
.opportunities header .circle-left {
  background: var(--prp-gold);
}
.opportunities header .circle-right{
  background: white;
  opacity: 50%;
}
.opportunities header h1, .opportunities header a{
  color: white;
}

.opportunity header {
  background: transparent
}
.opportunity header .circle-left {
  background: var(--prp-gold);
}
.opportunity header .circle-right{
  background: white;
}
.opportunity header h1, .opportunity header a{
  color: var(--prp-blue);
}




.contact header,.faqs header {
  background: var(--prp-dark);
}
.contact header .circle-left,.faqs header .circle-left {
  background: var(--prp-gold);
}
.contact header .circle-right,.faqs header .circle-right{
  background: var(--prp-blue);
}
.contact header h1,.contact header a,.faqs header h1,.contact header a{
  color: white;
}

.help-advice header {
  background: white;
}
.help-advice header .circle-left {
  background: var(--prp-gold);
}
.help-advice header .circle-right{
  background: var(--prp-blue);
}
.help-advice header h1,.help-advice header p{
  color: var(--prp-dark);
}
.article header {
  background: white;
}
.article header .circle-left {
  background: var(--prp-gold);
}
.article header .circle-right{
  background: var(--prp-blue);
}
.article header h1,.article header p{
  color: var(--prp-dark);
}

.success-stories header,.story header {
  background: var(--prp-gold);
}
.success-stories header .circle-left,.story header .circle-left {
  background: var(--prp-blue);
}
.success-stories header .circle-right,.story header .circle-right{
  background: white;
  opacity: 50%;
}
.success-stories header h1,.success-stories header a,.story header h1,.story header a{
  color: white;
}



/* END HEADER STYLES */

/* START FOOTER */
.breadcrumbs {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.footer-menu {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.copyright {
  font-size: .9rem;
  color: var(--prp-dark);
}
footer a {
  text-decoration: none;
  padding-top: .25rem;
  padding-bottom: .25rem;
  display:inline-block;
}
footer a:hover {
  text-decoration: underline;
  transition: .2s;
  color: white;
}
/* END FOOTER */

.enquiry-form input, .enquiry-form select, .enquiry-form textarea{
  border: none;
  border-radius: 0;
  padding: .85rem .75rem;
}
.enquiry-form label {
  font-weight: 700;
}
.enquiry-form button {
  border: none;
}
.pagination a[aria-current="page"]{
  text-decoration: none;
  font-weight: 700;
  color: var(--prp-blue);
}
.breadcrumbs a{
  color: white;
}
.breadcrumbs a.active{
  font-weight: 700;
  text-decoration: none;
}
#map {
  min-height: 400px;
}
.contact span#email a {
  color: var(--prp-dark);
}
footer span#email a{
  color: white;
}

.featured-article-card {
aspect-ratio: 4 / 3;
}

.featured-article-card h3 {
  font-weight: 400;
}
.featured-article-card h3 strong {
  font-weight: 700;
}

.featured-article-card img {
  object-fit: cover;
  object-position: center;
  z-index: 0;
  
}

.featured-article-card .overlay {
  background: rgba(0, 0, 0, 0.4); /* semi-transparent black */
  z-index: 1;
}

.featured-article-card img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block; /* Ensure no whitespace from inline images */
}

.featured-article-card:hover img {
  transform: scale(1.05); /* Slight zoom */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); /* Soft shadow */
}


.featured-article-card h3 {
  z-index: 2;
}
/* #storyCarousel .testimonial-details {
  padding: 0 5rem 0 4rem;
} */
#storyCarousel .carousel-control-prev,
#storyCarousel .carousel-control-next {
  width: 7.5%;
}

#storyCarousel .carousel-control-prev-icon,
#storyCarousel .carousel-control-next-icon {
  background-size: 3.5rem 3.5rem;
  padding: 25px;

}

#storyCarousel .carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Cpath d='M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z'%3E%3C/path%3E%3C/svg%3E");
}
#storyCarousel .carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'%3E%3C/path%3E%3C/svg%3E");
}


#faq-accordion .accordion-button {
  color: var(--prp-blue);
  font-weight: 700;
  background: transparent;
  border: none !important;
  outline: none;
  box-shadow: none;
}

#faq-accordion .accordion-button::focus,#faq-accordion .accordion-button::active {

  outline: none;
  box-shadow: none;
}

#faq-accordion .accordion-item {
background: transparent !important;
border-bottom: 1px solid var(--prp-dark);
padding: 1rem 0;
}
#faq-accordion .accordion-item:first-of-type {
border-top: 1px solid var(--prp-dark);
}

.stats h3 strong {
  color: var(--prp-blue);
  }

  img.background-cover {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 0;
    object-fit: cover;
  }

  .copyright a:hover {
    color: var(--prp-blue);
    text-decoration: underline;
  }

  .invalid-fields-notice {
    display: none;
}

.wc--card a {
  color: var(--prp-blue);
  text-decoration: none;
}
.wc--card a:hover {
  color: var(--prp-blue);
  text-decoration: underline;
}

header .back-link:hover {
  color: var(--prp-blue);
  transition: .2s;
}

.overview a {
  color: var(--prp-blue);
}

@media only screen and (max-width: 767px) {
  .promo-box .circle {
    bottom: -70%;
    right: -15%;
  }
}

@media only screen and (min-width: 1350px) {
  header .w-lg-75 {
    width: 75%;
  }
}

@media only screen and (max-width: 600px) {
  header .wc--heading-xl {
    font-size: 1.75rem ;
  }
}
@media only screen and (min-width: 601px) and (max-width: 767px) {
  header .wc--heading-xl {
    font-size: 2.3rem ;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  header .wc--heading-xl {
    font-size: 2.5rem ;
  }
}

@media only screen and (min-width: 1250px) {
  .gx-6{
    --bs-gutter-x: 5rem !important; /* adjust this value as you like */
  }
}

/* default hidden */
.mobile-nav { display: none; }


.mobile-nav.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 0;
    object-fit: cover;
    /* opacity: 0.4; */
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 0.5s;
}
.mobilenav {
  visibility: hidden;
  color: white;
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  top: 0;
  z-index: 999;
  justify-content: center;
  flex-direction: column;
  font-size: 2.25rem;
}


/* open state */
.mobile-nav.fadeIn { display: block; }

/* optional: if you want it to be none when closed after anim */
.mobile-nav.fadeOut { display: none; }


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeIn {
  visibility: visible;
  animation: fadeIn 0.5s;
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  -o-animation: fadeIn 0.5s;
  -ms-animation: fadeIn 0.5s;
}

.fadeOut {
  visibility: hidden;
  animation: fadeOut 0.5s;
  -webkit-animation: fadeOut 0.5s;
  -moz-animation: fadeOut 0.5s;
  -o-animation: fadeOut 0.5s;
  -ms-animation: fadeOut 0.5s;
}

a.menu-toggle {
  font-size: 1.25rem;
}
a.menu-toggle:hover {
  color: var(--prp-blue) !important;
}
a.menu-toggle span {
  font-size: 1.75rem;
  padding-right: .2rem;
  margin-top: -.075rem;
}
.overlay .mob-close {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 4rem;
  text-decoration: none;
  color: var(--prp-blue);
}

@media only screen and (max-width: 767px) {
  body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1520px) {
  body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* .carousel-item img {
  aspect-ratio: 3/1.5;
} */

.object-fit-contain {
  object-fit: contain;
}
@media only screen and (max-width: 499px) {
  .carousel-control-prev,.carousel-control-next {
     padding: 1.5rem !important;
  }
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    background-color: var(--prp-gold) !important;
}


/* START BANNER CIRCLES */

.circle-left,
.circle-right {
  position: absolute;
  aspect-ratio: 1 / 1;      /* keeps height = width */
  border-radius: 50%;
  pointer-events: none;     /* clicks pass through */
}

/* make sure the bg image is below the circles */
.background-cover { position: absolute; inset: 0; z-index: 0; }
.circle-left, .circle-right { z-index: 1; }       /* circles above image */
.text-wrapper { z-index: 2; }                     /* your content above all */

/* ≥1200px (your existing sizes) */
@media (min-width: 1200px) {
  .circle-left {
    width: 800px;            /* aspect-ratio makes height = 800px */
    background: var(--prp-blue);
    top: -20%;
    left: -25%;
  }
  .circle-right {
    width: 550px;
    background: var(--prp-gold);
    bottom: -120%;
    right: -20%;
  }
  .home .circle-right {
    right: -15% !important;
    bottom: -65% !important;
  }
}

/* <1200px (edge-hugging, responsive) */
@media (max-width: 1199px) {
  .circle-left  {
    width: clamp(220px, 38vw, 520px);
    background: var(--prp-blue);
    left: 0; top: 50%;
    transform: translate(-50%, -50%);
  }
  .circle-right {
    width: clamp(180px, 32vw, 460px);
    background: var(--prp-gold);
    right: 0; top: 65%;
    transform: translate(50%, -50%);
  }
}

.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-toggle {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.lang-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ddd;
  display: none;
  min-width: 100%;
  z-index: 10;
}

.lang-dropdown:focus-within .lang-menu {
  display: block;
}

.lang-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
}

.lang-menu li a:hover {
  background: #eee;
}
.uppercase {
  text-transform: uppercase;
}