/* Text */
.org-desc span,
h3 {
  font-size: 1.6rem !important;
}

.org-desc a {
  color: #1877f2 !important;
  text-decoration: underline;
}

.org-desc > p {
  font-size: 1.8rem;
}

span {
  font-size: 1.4rem !important;
}

/* Banner */
#banner-container {
  position: relative;
  width: 100%;
  padding-bottom: 20%;
  overflow: hidden;
}

#banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Buttons */

button {
  border-radius: 0.8rem;
  cursor: pointer;
  font-family: var(--text-font);
  font-weight: 500;
  font-size: 1.6rem;
}

.button-primary {
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  cursor: pointer;
  border-bottom: 0.4rem solid var(--blue-secondary);

  background-color: var(--blue-primary);
  color: var(--white);

  transition-property: border transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  z-index: 3;
}

.button-primary:hover,
.button-primary:focus,
.button-primary:disabled {
  border-bottom: 0.4rem solid #4472ca00;
  transform: translateY(0.2rem);
}

.button-icon {
  color: var(--hr-gray);
  background-color: var(--hr-white);
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.button-youtube:hover,
.button-youtube:active,
.button-youtube:focus-visible {
  color: #ff0000 !important;
}

.button-linkedin:hover,
.button-linkedin:active,
.button-linkedin:focus-visible {
  color: #0077b5 !important;
}

.button-x:hover,
.button-x:active,
.button-x:focus-visible {
  color: #000 !important;

}

.button-facebook:hover,
.button-facebook:active,
.button-facebook:focus-visible {
  color: #1877f2 !important;
}

.button-instagram:hover,
.button-instagram:active,
.button-instagram:focus-visible {
  color: #ea4c89 !important;
}


/* Template */
.card {
  border-radius: 0.8rem !important;
}

/* Spacing */

.py-6 {
  padding-bottom: 2.5rem !important;
  padding-top: 2.5rem !important;
}

.mb-6 {
  margin-bottom: 2.5rem !important;
}

.mt-6 {
  margin-top: 2.5rem !important;
}

.mt-n5 {
  margin-top: -2rem !important;
}

.h-10rem {
  height: 10rem !important;
}

.rounded-3 {
  border-radius: 0.8rem !important;
}

/* Pagination */
.page-link {
  background-color: var(--white);
  border: 0.1rem solid var(--gray-light);
  color: var(--gray);
  display: block;
  font-size: 1.4rem;
  padding: 0.8rem 1.48rem;
  position: relative;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-item:not(.active) .page-link:hover {
  background-color: var(--blue-primary);
  color: var(--white);
  box-shadow: rgba(68, 114, 202, 0.8) 0px 0.375rem 1.125rem -0.375rem !important;
  border-width: 0.1rem;
  border-style: solid;
  border-color: rgba(68, 114, 202, 0.8);
  border-image: initial;
}

.active > .page-link,
.page-link.active {
  background-color: var(--blue-primary);
  border-color: var(--blue-primary);
  color: var(--white);
  z-index: 3;
}

/* Extra large */
@media (min-width: 1200px) {
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }

  .ms-xl-3 {
    margin-left: 1rem !important;
  }
}

/* Large */
@media (min-width: 992px) {
  .h-lg-32rem {
    height: 32rem !important;
  }

  .h-lg-30rem {
    height: 30rem !important;
  }

  .h-lg-28rem {
    height: 28rem !important;
  }

  .h-lg-26rem {
    height: 26rem !important;
  }

  .h-lg-24rem {
    height: 24rem !important;
  }

  .h-lg-22rem {
    height: 22rem !important;
  }

  .h-lg-20rem {
    height: 20rem !important;
  }

  .h-lg-18rem {
    height: 18rem !important;
  }

  .h-lg-16rem {
    height: 16rem !important;
  }

  .w-lg-40 {
    width: 40% !important;
  }
}
/* Medium */
@media (min-width: 768px) {
  .w-md-50 {
    width: 50% !important;
  }
}

/* Footer */
footer {
  color: var(--black);

  padding: 3.3rem 11.6rem;
}

footer {
  color: var(--black);
  padding: 3.3rem 11.6rem;
}

.footer-link {
  color: var(--hr-gray);
  transition: color 0.2s ease-in-out;
}

.footer-link:hover {
  color: var(--hr-secondary);
}

footer a:hover::after {
  width: 100%;
  left: 0;
}


.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: scale(1.03);
  
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.content-container {
            position: relative;
        }

        .read-more-toggle {
            display: none;
        }

        .content {
            position: relative; /* Required for positioning the pseudo-element */
            max-height: 100px;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }
        
        /* THE NEW SHADOW EFFECT */
        /* This pseudo-element creates the shadow. It's initially invisible. */
        .content.is-truncated::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px; /* The height of the fade effect */
            /* The gradient fades from transparent to the background color */
            /* IMPORTANT: Change 'white' if your component's background is different */
            background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
            pointer-events: none; /* Allows text selection through the shadow */
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
        }

        .read-more-toggle:checked ~ .content {
            max-height: 1000px;
        }
        
        
        /* When expanded, fade the shadow out */
        .read-more-toggle:checked ~ .content.is-truncated::after {
            opacity: 0;
        }

        .read-more-trigger {
            cursor: pointer;
            display: inline-block;
            padding: 4px 16px;
            color: #007bff;
            border: none;
            margin-top: 10px;
            /* Position it above the shadow if they overlap */
            position: relative; 
            z-index: 2;
        }

        .read-more-trigger::before {
            content: "Read More";
        }

        .read-more-toggle:checked ~ .read-more-trigger::before {
            content: "Read Less";
        }
        
        .trigger-hidden {
            display: none;
        }

        /* Responsive Adjustments */
        @media (min-width: 768px) {
            .content {
                max-height: 70px;
            }
        }