/* ==================>
SECTION
<================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.about {
  position: relative;
  overflow: hidden;
}

.about img[src*="feather"] {
  position: absolute;
  opacity: 0.05;
  z-index: -1;
}

.about .carousel .carousel-item {
  border-radius: 6rem 0;
  overflow: hidden;
  position: relative;
  --ol-bg: rgba(10, 80, 26);
}
.about .carousel .carousel-item .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hero-wrapper {
  position: relative;
}

.hero-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--clr-main-light);
  z-index: -9;
}
.hero .title {
  color: var(--clr-accent);
}
.hero .theme {
  color: var(--clr-alt);
}
.hero .loc {
  background: #0092ae;
  color: #fff;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 1.5rem 0 1.5rem 0;
  box-shadow: 2px 2px 0 #03758b;
}

.hero-seperator {
  fill: var(--clr-main-light);
}

.hero img[src*="abstract-triangle"] {
  position: absolute;
  z-index: -1;
}
.hero img[src*="1"] {
  left: -5%;
  top: 60%;
}
.hero img[src*="2"] {
  right: -10%;
  top: 5%;
}

.updates {
  display: flex;
  align-items: center;
  background: #754817;
  border-radius: 50vw;
  color: #fff;
  overflow: hidden;
}

.updates > * {
  padding: 0.5rem 1rem;
}

.updates .announcement {
  border: 1px solid var(--bs-gray-200);
  overflow: hidden;
  border-radius: 0.355rem;
  margin: 0;
}
.updates .announcement .details {
  display: flex;
  column-gap: 1rem;
}

.updates .announcement .scroll-items div p {
  margin-bottom: 0;
  color: var(--clr-accent);
}

.updates .announcement .scroll-items div h5 {
  color: var(--clr-main);
  /* margin-left: 1.2rem; */
}

.updates p {
  flex: 0 0 auto;
  font-size: 1.125rem;
  font-weight: 500;
  /* background: #0092ae; */
  color: #fff;
  margin: 0;
  overflow: hidden;
}

.scroll-wrapper {
  /* background: url("../img/pattern.svg"),
    linear-gradient(45deg, #fadccc, #f8e8d5);
  border: 1px solid #eebba2; */
  /* background: #eeeef6; */
  flex: 1 1 auto;
  overflow: hidden;
  max-width: 100%;
}

#scroller {
  display: flex;
  column-gap: 4rem;
  width: max-content;
}

#scroller .scroll-items {
  display: flex;
  column-gap: 1rem;
  width: max-content;
}
#scroller .scroll-items div {
  flex: 1 0 auto;
  font-size: 1rem;
}

#scroller .scroll-items div a {
  color: #fce290;
  letter-spacing: 0.75px;
}

.vscroll-wrapper {
  overflow-y: scroll;
  background: #eaf2f5;
  padding: 1rem;
  scrollbar-width: 0.25rem;
}

.vscroll-wrapper ul li {
  margin-bottom: 0.25rem;
  color: #fff;
  position: relative;
}
.vscroll-wrapper ul li.purple {
  background: linear-gradient(to right, #8c05e6, #d094f8);
}
.vscroll-wrapper ul li.blue {
  background: linear-gradient(to right, #0575e6, #bcc5f3);
}

.vscroll-wrapper ul li.active {
  padding-block: 1rem;
  border: none;
}

.cf-highlights {
  position: relative;
  overflow: hidden;
  --colorStart: #c0f0aa;
  --colorSecond: #cf9efc;
  --colorThird: #00c3ff;
  z-index: 0;
}
.cf-highlights::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: radial-gradient(
      at 0% 50%,
      rgba(250, 252, 238, 0.85) 0px,
      transparent 50%
    ),
    radial-gradient(at 66% 64%, rgba(219, 245, 224, 0.65) 0px, transparent 50%),
    url("../img/grain.png");
  opacity: 0.05;
  z-index: -1;
}

.cf-highlights .light-ellipse {
  position: absolute;
  top: 0;
  text-align: center;
  background: #d3ffda;
  opacity: 0.7;
  -webkit-filter: blur(170px);
  filter: blur(170px);
  width: 640px;
  height: 410px;
  z-index: -1;
}

.cf-highlights .color-change-3x {
  -webkit-animation: color-change-3x 9s linear infinite normal;
  animation: color-change-3x 9s linear infinite normal;
}
.cf-highlights .light-ellipse--right {
  left: 65%;
}

@keyframes color-change-3x {
  0% {
    background: var(--colorStart);
  }
  33% {
    background: var(--colorSecond);
  }
  66% {
    background: var(--colorThird);
  }
  100% {
    background: var(--colorStart);
  }
}

.cf-highlights .card {
  border: 0;
  background: linear-gradient(45deg, #eaf2f5, whitesmoke);
  /* background-image: linear-gradient(-225deg, #fffeff 0%, #d7fffe 100%); */
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 25px rgb(78 217 108 / 15%);
  height: 100%;
}

.cf-highlights .card .cfhn {
  position: relative;
  font-weight: 800;
  display: inline-block;
  isolation: isolate;
  margin-bottom: 1em;
  color: #fff;
  text-wrap: nowrap;
  --leaf-bg: linear-gradient(var(--clr-main-dark), var(--clr-main));
}
.cf-highlights .card .cfhn::before {
  content: attr(data-number);
  position: absolute;
  min-width: 64px;
  padding: 0.5em;
  background: var(--leaf-bg);
  top: -1em;
  border-radius: 0 75%;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-highlights .card .cfhn + p {
  margin-bottom: 0;
}

.cf-highlights .card .cfhn[data-number="01"] {
  --leaf-bg: linear-gradient(to right, #489a4e, #41ad48);
}

.cf-highlights .card .cfhn[data-number="02"] {
  --leaf-bg: linear-gradient(to right, #e52d27, #b31217);
}

.cf-highlights .card .cfhn[data-number="03"] {
  --leaf-bg: linear-gradient(to right, #f2994a, #f2c94c);
}

.cf-highlights .card .cfhn[data-number="04"] {
  --leaf-bg: linear-gradient(to right, #ff00cc, #aa078a);
}

.cf-highlights .card .cfhn[data-number="05"] {
  --leaf-bg: linear-gradient(to right, #8c05e6, #9f27f0);
}

.cf-highlights .card .cfhn[data-number="06"] {
  --leaf-bg: linear-gradient(to right, #0575e6, #0527e6);
}

.cf-highlights .card .cfhn[data-number="07"] {
  --leaf-bg: linear-gradient(to right, #7beb12, #68c510);
}

.acs {
  /* background: url("../img/links.png") no-repeat;
  background-size: cover; */
  position: relative;
  z-index: 0;
}
.acs::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
      to right bottom,
      rgb(231 242 255),
      rgb(255 255 255 / 65%)
    ),
    url("../img/links.png") no-repeat center/cover,
    url("../img/landing1.webp") no-repeat center/cover;
  opacity: 1;
  z-index: -1;
}
.cfa .reg-wrapper,
.cfa .abs-wrapper {
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
  grid-template-areas: "stack";
}

.cfa .reg-wrapper > *,
.cfa .abs-wrapper > * {
  position: relative;
  grid-area: stack;
  isolation: isolate;
  height: 100%;
  display: flex;
  align-items: center;
}

.cfa .reg-wrapper {
  border-radius: 50vw 0;
}

.cfa .abs-wrapper {
  border-radius: 0 50vw;
}

.cfa .cfa__img::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, #a4e76e, #061d22);
  opacity: 0.85;
  z-index: 1;
}

.cfa .reg-wrapper img,
.cfa .abs-wrapper img {
  transform: scale(1);
  transition: ease 350ms;
  height: 100%;
}
.cfa .reg-wrapper:hover img,
.cfa .abs-wrapper:hover img {
  transform: scale(1.25);
}

.cfa .cfa__content {
  padding: 1rem 0;
}

.speaker-slider .slick-track {
  display: flex;
}

.speaker-slider .slick-slide {
  height: auto !important;
}
.speaker-slider .slick-prev:before,
.speaker-slider .slick-next:before {
  opacity: 0;
}

.speakers .slick-arrow-custom {
  position: relative;
  padding-inline-start: 1rem;
  margin-block-start: 1rem;
  display: flex;
}

.speakers .slick-arrow-custom :is(.prev-btn, .next-btn) {
  background: var(--clr-main);
  border: 0;
  color: #fff;
  padding: 0.5rem 1rem;
}

.speakers .slick-arrow-custom .slick-disabled {
  background: #eee;
  color: #777;
}
.speaker-slider .card {
  margin-inline: 2rem;
  border: none;
  background: transparent;
  color: #000;
  text-align: center;
}
.speaker-slider .tm-name span {
  display: block;
}
/* .speaker-slider img{
  width: ;
} */
/*
.speaker-slider .card + .card {
  margin-top: 1rem;
}
*/
.resources {
  text-align: center;
  margin-top: 0.75rem;
}
.resources .resource-item {
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: var(--clr-main-dark);
  border: 1px solid;
  padding: 0.375rem;
}
.info {
  background: url("../img/circles-green.webp") no-repeat center/cover;
}
.bg-blur {
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
}