/******************** section.event *********************/
section.event {
   height: 100%;
   background-color: #fff;
}

.txt-h-event {
   width: 100%;
   display: flex;
   margin: 2rem 0;
}

.txt-h-event h1.txt-h-center {
   font-size: 4vw;
   margin-left: auto;
   margin-right: auto;
   color: #005197;
   letter-spacing: 3px;
}

.event .event-con {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding-top: 2rem;
}

.event-con .event-box {
   display: flex;
   position: relative;
   flex-direction: column;
   margin: 1rem;
   border-radius: 1rem;
   width: fit-content;
}

.event-box .img-event {
   width: 20vw;
   height: 22vw;
   overflow: hidden;
   border-radius: 2.5rem;
}

.img-event img {
   max-width: 100%;
   transform-origin: center;
   transform: scale(1.1);
   transition: transform 1s ease-in-out;
   /* 02-05-24 */
   width: 100%;
   height: 100%;
}

.event-box:hover img {
   transform: scale(1);
}

.event-box .name-event {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: absolute;
   bottom: 0;
   border-radius: 0 0 2.5rem 2.5rem;
   color: #005197;
   padding: 1.5vw;
   background: rgb(255 255 255 / 80%);
   width: 100%;
}

.name-event h3 {
   font-family: 'Lato', sans-serif;
   font-weight: bolder;
   text-transform: uppercase;
   font-size: 1.5rem;
}

.name-event i {
   transform: rotateZ(45deg);
   font-size: 0.9rem;
   transition: 0.5s ease;
}

.name-event:hover i {
   transform: rotateZ(135deg);
}
/******************** section.event *********************/




/******************** new.event 02-05-24*********************/
.top-35 {
   top: 35vh;
}

@media (max-width: 1024px) {
   .top-35 {
      top: 15vh;
   }
}

.img-slide {
   display: flex;
   padding: 5vh 0;
   /* 29-11-24 */
   cursor: none;
}
.test-img {
   width: 40vw;
   height: 25vw;
   background-color: #333;
   margin-left: 0.5em;
}
/******************** new.event *********************/



/******************** marquee for upcoming event *********************/
:root {
   --marquee-js-width: 95vw;
   --marquee-js-height: 18vh;
   --marquee-js-elements: 10;
   --marquee-js-elements-displayed: 5;
   --marquee-js-elements-width: calc(var(--marquee-js-width) / var(--marquee-js-elements-displayed));
   --marquee-js-animation-duration: calc(var(--marquee-js-elements) * 3s);
}

.marquee-js {
   position: relative;
   width: var(--marquee-js-width);
   height: var(--marquee-js-height);
   overflow: hidden;
}

.marquee-js:before,
.marquee-js:after {
   content: "";
   position: absolute;
   width: 10rem;
   height: 100%;
   z-index: 1;
   top: 0;
}

.marquee-js::before {
   left: 0;
   background: linear-gradient(to right, #ffffff 0%, transparent 100%) !important;
}

.marquee-js::after {
   right: 0;
   background: linear-gradient(to left, #ffffff 0%, transparent 100%) !important;
}

.marquee-js .marquee-js-content {
   list-style: none;
   height: 100%;
   display: flex;
   animation: MarqueeScrolling var(--marquee-js-animation-duration) linear infinite;
}

@keyframes MarqueeScrolling {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(calc(-1 * var(--marquee-js-elements-width) * var(--marquee-js-elements)));
   }
}

.marquee-js .marquee-js-content li {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
   /* width: var(--marquee-js-elements-width); */
   max-height: 100%;
   /* font-size: calc(var(--marquee-js-height) * 3 / 4); */
   font-size: 2rem;
   font-weight: bolder;
   white-space: nowrap;

   margin-left: 10rem;
}

.marquee-js .marquee-js-content li img {
   width: 100%;
   margin: 2rem;
}

.marquee-js-content p {

   text-transform: uppercase;
   background: linear-gradient(to right, #339f5b 0%, #005197 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

}

@media (max-width: 1466px) {
   :root {
      --marquee-js-width: 90vw;
      --marquee-js-height: 20vh;
      --marquee-js-elements-displayed: 3;
   }

   .marquee-js:before,
   .marquee-js:after {
      width: 5rem;
   }
}

@media (max-width: 600px) {
   :root {
      --marquee-js-height: 16vh;
      --marquee-js-elements-displayed: 3;
   }

   .marquee-js:before,
   .marquee-js:after {
      width: 5rem;
   }
}
/******************** marquee for upcoming event *********************/