

  /* =====================
    SECTION: HERO
    ====================== */
  .hero {
    position: relative;
    z-index: 1;
  }

  .hero .heroVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
  }

  .hero .carousel-item {
    z-index: 1;
    max-height: calc(100svh - var(--top-bar-height));
    overflow: hidden;
    min-height: 50svh;
    position: relative;
    z-index: 1;
  }

  .hero .carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--primary-color-rgb), 0.15);
    z-index: 1;
  }

  .hero .carousel-item img {
    /* animation: carouselScale 10s ease-out forwards; */
    min-height: 50svh;
    object-fit: cover;
  }

  .hero .carousel-caption {
    z-index: 2;
    text-align: start;
    bottom: 50%;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero .carousel-title {
    max-width: 21ch;
    color: var(--bs-light);
    font-size: var(--fs-large-banner);
    font-family: var(--heading-font);
    line-height: 1.2em;
    opacity: 0;
    transform: perspective(300px) rotateY(21deg) translateY(80px);
    transform-origin: bottom;
    margin-bottom: 1rem;
    font-weight: bold;
  }

  .hero .carousel-item.active .carousel-title {
    animation: captionSlideIn 1000ms 500ms ease forwards;
  }

  .hero .carousel-subtitle {
    color: var(--bs-light);
    font-size: var(--fs-small-banner);
    font-family: var(--heading-font);
    line-height: 1.2em;
    opacity: 0;
    transform: perspective(300px) rotateY(21deg) translateY(80px);
    transform-origin: bottom;
    margin-bottom: 0.3rem;
  }

  .hero .carousel-item.active .carousel-subtitle {
    animation: captionSlideIn 1000ms 500ms ease forwards;
  }

  .hero .carousel-caption .btn-main {
    transform: translateY(80px);
  }

  .hero .carousel-item.active .btn-main {
    animation: captionSlideUp 1500ms 1500ms ease forwards;
  }

  .hero .carousel-caption .btn-main-outline {
    transform: translateY(80px);
  }

  .hero .carousel-item.active .btn-main-outline {
    animation: captionSlideUp 1500ms 1500ms ease forwards;
  }

  .hero .carousel-nav {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    position: absolute;
    top: 50%;
    right: 15%;
    z-index: 2;
    transform: translateY(-50%) translateZ(1px);
    transition: transform 500ms ease, opacity 500ms ease;
  }

  @media (hover: hover) {
    .hero .carousel-nav {
      transform: translateY(0%) translateZ(1px);
      opacity: 0;
    }

    .hero .carousel:hover .carousel-nav {
      opacity: 1;
      transform: translateY(-50%) translateZ(1px);
    }
  }

  .hero .carousel-control-next,
  .hero .carousel-control-prev {
    position: relative;
    width: auto;
    padding: 1rem;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0.25;
    transition: opacity 250ms ease;
  }

  .hero .carousel-control-next:hover,
  .hero .carousel-control-prev:hover {
    opacity: 1;
  }

  .hero .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8'/%3e%3c/svg%3e");
  }

  .hero .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5'/%3e%3c/svg%3e");
  }


  @property --grad-one-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 75%;
  }

  @property --grad-one-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -5%;
  }

  @property --grad-two-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%;
  }

  @property --grad-two-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 140%;
  }

  .counter__content {
    text-align: center;
    background:
      radial-gradient(ellipse 200% 250% at var(--grad-one-x) var(--grad-one-y), rgba(var(--bs-light-rgb), 0.35), transparent 25%),
      radial-gradient(ellipse 150% 400% at var(--grad-two-x) var(--grad-two-y), rgba(var(--bs-light-rgb), 0.5), transparent 25%),
      radial-gradient(circle at 25% 35%, var(--primary-color), var(--primary-color));
    color: var(--bs-light);
    border-radius: 1rem;
    position: absolute;
    width: 100%;
    top: -125px;
    z-index: 11;
    transition: --grad-one-x 3s ease, --grad-one-y 3s ease, --grad-two-x 3s ease, --grad-two-y 3s ease;
  }



  .counter__count {
    font-size: var(--fs-large-banner);
    font-weight: bold;
  }

  .counter__dt {
    position: relative;
  }

  .counter__icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: var(--bs-light);
    z-index: -1;
    opacity: 0.05;
  }

  .counter__icon svg.icons-tabler-outline {
    width: 192px;
    aspect-ratio: 1;
    fill: none;
    stroke: currentColor;
    stroke-width: 0.5pt;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* =====================
      SECTION: ABOUT
  ====================== */

  .about__section {
    background: linear-gradient(90deg, rgba(var(--bs-light-rgb), 0.75), rgba(var(--bs-light-rgb), 0)), url(../images/about-us/about__bg.webp) center / cover;
  }

  .img-box3 {
    position: relative;
    z-index: 2;
    line-height: 1px;
  }

  .img-box3 .img1 {
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 15px;
  }

  .img-box3 .img2 {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--bs-light);
    padding: 10px 4px 4px 10px;
    border-radius: 10px;
    -webkit-animation: jumpAni 7s linear infinite;
    animation: jumpAni 7s linear infinite;
  }

  .img-box3 .img2 img {
    border-radius: inherit;
  }

  @keyframes jumpAni {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    40% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .img-box3 .img3 {
    position: absolute;
    left: -90px;
    top: 80px;
    -webkit-animation: jumpReverseAni 7s linear infinite;
    animation: jumpReverseAni 7s linear infinite;
  }

  @keyframes jumpReverseAni {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    50% {
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @media (max-width: 1299px) {
    .img-box3 .img3 {
      left: -40px;
    }
  }

  @media (max-width: 575px) {
    .img-box3 .img2 {
      max-width: 70%;
    }
  }

  @media (max-width: 575px) {
    .img-box3 .img3 {
      left: -28px;
      max-width: 35%;
    }
  }

  @media (max-width: 575px) {
    .img-box3 .shape1 {
      max-width: 50%;
      left: -30px;
      top: 40%;
    }
  }

  @media (max-width: 1199px) {
    .img-box3 {
      /* margin-left: 220px; */
    }

    .img-box3 .img2 {
      right: 210px;
    }
  }

  .img-box3 .img3 img {
    border-radius: 10px;
  }

  .img-box3 .shape1 {
    position: absolute;
    top: 80px;
    left: -195px;
    z-index: -1;
    -webkit-animation: movingX 8s linear infinite;
    animation: movingX 8s linear infinite;
  }

  @keyframes movingX {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    50% {
      -webkit-transform: translateX(50px);
      transform: translateX(50px);
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }


  /* =====================
    SECTION: MESSAGE
  ====================== */

  .message__content {
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(45deg, #fafafa, #ffffff);
    box-shadow: 0px 1px 5rem rgba(var(--secondary-color-rgb), 0.10);
  }


  /* =====================
    SECTION: UPDATES
  ====================== */
  .events-heading {
    display: flex;
    column-gap: 1rem;

    .glide__arrows {
      display: flex;
      align-items: center;
      column-gap: 0.5rem;
    }

    .glide__arrow {
      position: static;
      color: var(--bs-body-color);
      transform: none;
    }
  }

  /* =====================
    SECTION: LINKS
  ====================== */

  .card__section {
    background: url(../images/ref-bg.webp) center / cover;
  }

  .card__content {
    padding: 2rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: rgba(var(--secondary-color-rgb), 0.15) 0px 2px 3rem -1px;
  }

  .card__icon i {
    font-size: var(--fs-title);
    color: var(--bs-light);
  }

  .card__info {
    font-weight: 700;
    font-family: var(--heading-font);
    font-size: var(--fs-sub-title);
    line-height: 1.1;
  }

  .card__icon {
    --ic-br: 0 50% 50%;
    --ic-anm-duration: 4s;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 2rem;
  }

  .card__icon i::before {
    padding: 1.5rem;
    background-color: var(--primary-color);
    font-size: var(--fs-small-banner);
    color: var(--bs-light);
    border-radius: var(--ic-br);
  }

  .card__icon::after,
  .card__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--primary-color);
    z-index: -2;
    border-radius: var(--ic-br);
    transform-origin: top left;
    animation: var(--ic-anm-duration) ripple ease-in-out infinite;
  }

  .card__icon::after {
    -webkit-animation-delay: calc(var(--ic-anm-duration) / 2);
    animation-delay: calc(var(--ic-anm-duration) / 2);
  }

  @keyframes ripple {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }

    30% {
      opacity: 0.25;
    }

    100% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 0;
    }
  }

/* =====================
    SECTION: COUNCIL
  ====================== */

  .council{
    position: relative;
  }
  .council::before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    background: url("../images/card.webp");
    background-position: center;
    background-size: cover;
    opacity: 0.6;
    z-index: -1;
  }
  .council img{
    border-radius: 10px;
  }
  .years{
    position: relative;
    text-align: center !important;
  }
  .years::after{
    position: absolute;
    content: "";
    height: 100px;
    width: 100px;
    bottom: -27px;
    right: 53px;
    background: url("../images/des1.png");
    background-position: center;
    background-size: cover;
    z-index: 1;
  }
  .coun_head span{
    color: transparent;
    background: linear-gradient( 270deg, var(--primary-color), var(--secondary-color));
    background-clip: text;
  }
  .coun_head{
    position: relative;
  }
  .coun_head::before{
    position: absolute;
    content: "";
    height: 70px;
    width: 700px;
    top: -9px;
    left: -6px;
    background: url("../images/heading_bg.png");
    background-position: center left;
    background-size: cover;
    z-index: -1;
  }
  .mem_head{
    color: transparent;
    background: linear-gradient( 270deg, var(--primary-color), var(--secondary-color));
    background-clip: text;
  }

  label.error{
    color: #f00;
    font-size: 12px;
  }
