/* Colours */
.white {color:white;}
.yellow { color:#f3bd3b; }

/* Fonts */
.gelica {font-family: gelica,serif;}

/* Backgrounds */
.green-noise-bg {background: url("/wp-content/themes/understrap-main/img/noise.png"),linear-gradient(0deg,#31413a 0,#42594f 50%);}
.black-icon { background-color:#1E1E1E; }
.black-icon-bg { background: url("/wp-content/themes/understrap-main/img/arrows-bg.svg"),#191919;}

/* CTAs */
.double-text-icon-cta *{ color:white; }
.double-text-icon-cta { margin-left:15px; margin-top:10px; }
.double-text-icon-cta a { text-decoration: none; color: white; transition: color 0.2s ease; }
.double-text-icon-cta a:hover { color: white; }
.double-text-icon-cta i { font-size: 1em; margin-right:0.3rem; }
.double-text-icon-cta .p22 { margin: 0 1rem; font-weight: 400; font-style: italic; color: white; }


/* BUTTONS */
.button-large-1 { font-size:1.4em; } 

/* Top Nav */
.page-template-home-new .navbar { background-color:#42584e !important; }
.page-template-about-new  .navbar { background-color:#42584e !important; }
.page-template-get-started-v2-new .navbar { background-color:#42584e !important; }
.page-template-product-new .navbar { background-color:#42584e !important; }


/* Footer */
#wrapper-footer {background-color:#43594f !important;}


/* Hero */
.hero-green {background: url("../img/arrows-bg.svg"),#42584e;}
.tp-hero-home { margin-bottom:20px; }

#image-slider-home {}

#image-slider-home .splide__track { height: 400px; }

#image-slider-home .splide__slide img {
  height: 100%;
  width: auto; /* or 100% if you want it stretched */
  object-fit: contain; /* or `contain` depending on how you want it scaled */
}



/* Gettting cover is easy */
.large-numbers-cover { font-size:5em !important; }



/* About us carousel */

#team-carousel .splide__slide { background-color:#eff1f0; border-radius:0 0 20px 20px; padding-bottom:30px; }

#team-carousel .team-name { color:#42594F; }
#team-carousel .job-role { color:#8C8367;  }

#team-carousel .splide__slide h5 {
  margin-bottom: 1rem; color: #42594F;
}

#team-carousel .splide__slide img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

#team-carousel .splide__slide:hover img {
  filter: grayscale(0%);
}

#team-carousel .splide__slide {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#team-carousel .splide__slide:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* optional: soft shadow for lift effect */
}

#team-carousel,
#team-carousel .splide__track {
  overflow: visible;
}

#team-carousel .splide__arrow { background-color:#8b779d; }


.teamModal .modal-dialog {
  margin-top: 4rem;
}



/* Get started */
.page-template-get-started-v2-new #contact-widget { visibility: hidden !important; }

 /* Main slide styling */
#case-study-carousel .splide__slide {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* Overlay at bottom of slide */
.case-study-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
  color: white;
  pointer-events: none;
}

.case-study-title {
  font-size: 1.25rem;
  margin: 0;
  z-index: 2;
  pointer-events: auto;
}

/* Link starts hidden, fades in on hover */
.read-case-link {
  color: #ffd700;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: auto;
  text-decoration: none;
}

.read-case-link:hover {
  color: #ffd700;
}

/* Show the link on hover (desktop) */
.case-study-slide:hover .read-case-link {
  opacity: 1;
  text-decoration: none;
}

/* Always show link and reduce font size on mobile */
@media (max-width: 768px) {
  .read-case-link {
    opacity: 1 !important;
    font-size: 0.775rem; /* slightly smaller than default */
  }
}


/*
.blog article.category-case-studies { display:none !important; } */

.single-post .entry-meta { display:none !important; }
.blog .post-date { display:none !important; }


.page-template-product-new .content-section-5, .page-template-product-new .content-section-4 { display:none; }


.page-template-product-new .accordion-item:nth-of-type(n+6) {
  display: none;
}

/* Off Canvas Menu Nav */

.custom-nav-offcanvas {
  width: 25vw !important;
  max-width: none;
  transition: transform 0.3s ease-in-out;  background: rgba(25, 25, 25, 1.0) !important;
}

@media (max-width: 767.98px) {
  .custom-nav-offcanvas  {
    width: 100vw !important;
  }
}

.menu-block-heading {
  color: #8C8367 !important;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}

.custom-nav-offcanvas .menu-block .nav-link {
  color: #ffffff;
  text-decoration: none;
  padding-left: 1rem;
  display: block;
  transition: color 0.2s ease-in-out;
  line-height: 1.8; 
}

.custom-nav-offcanvas .menu-block .nav-link:hover,
.custom-nav-offcanvas .menu-block .nav-link:focus {
  color: #ffffff;
  text-decoration: underline;
}

.offcanvas .btn-close {
  filter: brightness(0) invert(1); /* Makes the default icon white */
  opacity: 1; /* Optional: make it fully opaque */ color: white;
}

.blackCard { background-color: transparent !important;  }
.blackCard h6 { display:none; }
.custom-nav-offcanvas .nav-cta-block * {
  padding-left: 1rem;
}


 .hamburger-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    z-index: 11;
    float: right;
    .hamburger {
      position: absolute;
      transform: translate(-50%, -50%) rotate(0deg);
      left: 50%;
      top: 50%;
      width: 50%;
      height: 50%;
      pointer-events: none;
      span {
        width: 100%;
        height: 4px;
        position: absolute;
        background: #ffffff;
        border-radius: 2px;
        z-index: 1;
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1),
          all 0.2s ease-in-out;
        left: 0px;
        &:first-child {
          top: 10%;
          transform-origin: 50% 50%;
          transform: translate(0% -50%) !important;
        }
        &:nth-child(2) {
          top: 50%;
          transform: translate(0, -50%);
        }
        &:last-child {
          left: 0px;
          top: auto;
          bottom: 10%;
          transform-origin: 50% 50%;
        }
      }
      &.active {
        span {
          position: absolute;
          margin: 0;
          &:first-child {
            top: 10% !important;
            transform: rotate(0deg) !important;
          }
          &:nth-child(2) {
            left: 0% !important;
            top: 50% !important;
            width: 100% !important;
          }
          &:last-child {
            top: auto !important;
            transform: rotate(0deg) !important;
          }
        }
      }
    }
  }
}