.carousel-inner>.item {
  background: #fff;
}

.vdcard-container {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  height:370px;
}



.vdcard.active {  
  width: 80%;
  /*  overflow: visible; */
  z-index: 1;
  opacity:1;
}
.vdcard video{
  /*   transition: box-shadow 0.6s ease; */
  /*   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); */
  border-radius: 12px;


} 
.vdcard.active video{
  border-radius: 12px;
  /*   background: rgba(1, 131, 255, 0.50); */
  /*   box-shadow: 0px 0px 100px 0px rgba(1, 131, 255, 0.50); */
}

.slidecardvid {
  width: 665px; 
  height: 100%;
  object-fit: cover;
  /*   position: absolute; */
  /*   left: 50%;
  transform: translateX(-50%); */
}

.vdcard-info p {
  margin: 0;

}

/* Prevent the video controls from being overlapped */
.vdcard.active .vdcard-info{
  border-top-left-radius: 12px;
} 
.vdcard-info{ 
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: #0183ff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  width: 218.26px;
  text-align: center;
  padding: 10px 30px;
  color: white;
  font-size: 14px;
  z-index: 2;
  flex-shrink: 0;
  transition: all 1s ease;
  min-height: 48px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.slidecardvid video {
  z-index: 0;
}

/* Ensure the controls of the video remain clickable */
.vdcard:hover video, .vdcard.active video {
  pointer-events: auto;
}


#csitemsCarousel .carousel-control {
  right: 0;
  left: unset;
  opacity: 1;
  top: -66px;
  width: unset;
  height: 0px;
}
#csitemsCarousel .carousel-control.left {
  right: 55px;
}
/* .csitemsslide .row{display:flex;align-items:center;flex-wrap:wrap;} */
.csitemsslide{border-radius: 16px;
  border: 1px solid rgba(1, 131, 255, 0.30);
  background: linear-gradient(0deg, rgba(237, 246, 255, 0.30) 3.34%, #EDF6FF 96.88%);}


.csitemsslide .csitemsslidelogo{background: linear-gradient(180deg, #002B54 0%, #021D36 100%), #002B54;
  backdrop-filter: blur(5px);border-radius: 16px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -16px;
}

.csitemsslide .csitemsslideimg{
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #003b7305;
  border-radius: 16px 16px 0px 0px;
      height: 340px;
}
.csitemsslide .csitemsslideimg img{    border-radius: 16px 16px 0px 0px;
  display: block;
  margin: auto;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    max-width: none !important;}
.csitemsslide .csitemsslidecontent h6{color: #0183FF;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;}
.csitemsslide .csitemsslidecontent h6 span{border-radius: 50px;
  background: #FFF;
  padding: 10px 25px;
  margin-right: 10px;}

.csitemsslide .csitemsslidecontent h3{    color: #002B54;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.64px;
  max-width: 560px;    padding-top: 10px;}
.csitemsslide .csitemsslidecontent p{color: rgba(0, 43, 84, 0.7);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; 
  max-width: 500px;
  min-height:unset;    padding-top: 5px;padding-bottom:15px;}
.csitemsslidecontent {
  min-height: 410px!important;
}
.csitemsslidecontentdiv { 
      padding: 48px 48px 0px 18px;
}
.csitemsslide .csitemsslidecontent h4{color: #002B54;
  font-size: 16px;
  font-weight: 400; 
  line-height: 1.4;
  border-left: 5px solid rgba(1, 131, 255, 0.20);
  padding-left: 20px; width:50%;margin:0px;}
.csitemsslide .csitemsslidecontent h4 strong{color: #0183FF;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.44px;
  display: block;}
.csitemsslide .csitemsslidecontent h4 span{padding-right:25px;display: block; opacity: 0.7;font-weight:400;min-height:45px;  }
.csitemsslide .csitemsslidecontent h4 span em{font-style:normal;}
.csitemsslidecontentemp{display: flex; align-items: center; flex-wrap: wrap; width: 92%;     position: absolute;
    bottom: 0;}
.vdcard-container {
  display: flex; 
  gap: 20px;
}

.vdcard {
  position: relative;
  width: 300px;
}

.slidecardvid video {
  width: 100%;
  height: auto;
}

.controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
}

.mute-toggle,
.play-cta {
  border: none;
  cursor: pointer;
  padding: 0px;
  background: transparent !important;
}
/* .thumbnail-wrapper{display:none!important;} */
.video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101.1%;
  object-fit: cover;
  cursor: pointer;
  z-index: 2; 
  opacity: 1;
  border-radius: 12px; 

  /*   transition: opacity 5s ease-in-out; /* Smooth transition for hiding and showing */ */
}

.video-thumbnail.hide {
  opacity: 0;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* .vdcard {
position: relative;
width: 10%;
transition: width 1s ease-in-out, transform 1s ease-in-out;
cursor: pointer;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px;
z-index: 2;
opacity:0.6;
display: inline-block;
}  */

.vdcard { 
  position: relative;
  width: 300px;
  height: 100%;
  transition: width 0.5s ease-in-out, transform 0.5s ease-in-out;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  z-index: 2;
  opacity: 0.6;
}



.thumbnail-wrapper {
  position: absolute;
  top: 0;
  width: 665px;
  height: 100%;
  overflow: hidden; 
  transition: all 1s ease; 
}
.vdcard.active .thumbnail-wrapper {
  width: 100%;
  left:0;
  right:0;
  transform: translateX(0%);  
}
.thumbnail-wrapper.left {
  left: -85px; 
  right:unset;
}
.thumbnail-wrapper.left1 {
  left: -26px; 
  right:unset;
}

.thumbnail-wrapper.center {
  left: 50%;
  transform: translateX(-50%); 
}

.thumbnail-wrapper.right {
  right: -105px;
  left:unset;
}

.video-thumbnail {
  position: absolute;
  top: 0;
  width: 100%; /* Full width of thumbnail */
  height: 100%; /* Full height of thumbnail */
  object-fit: cover; /* Ensure it covers the container */
  cursor: pointer;
  z-index: 2; 
  opacity: 1;
  border-radius: 12px; 
}

.slidecardvid {
  flex-grow: 1; /* Allow the video area to grow and fill space */
}

.video-element {
  width: 100%; /* Full width for video */
  height: auto; /* Maintain aspect ratio */
}


@media (max-width: 767px){
  .eventsHerodont,.resourcesHerovid{
    padding:60px 0px!important; 
  }
  .eventsHerodont h2{
    font-size: 22px!important;
    margin-top:0px; 
  }
  #csitemsCarousel .carousel-control img{width:25px!important;padding:5.5px 5px!important;}
  #csitemsCarousel .carousel-control.left {
    right: 30px;
  }
  #csitemsCarousel .carousel-control{    top: -52px;}
  .csitemsslide .csitemsslidelogo{    min-height: 80px;}
  .csitemsslide .csitemsslidelogo img{ transform: scale(0.6);}
  .csitemsslidecontentdiv { padding: 15px;min-height:370px;}
  .csitemsslide .csitemsslidecontent h6 {  font-size: 12px;}
  .csitemsslide .csitemsslidecontent h3 {font-size: 20px;}
  .csitemsslide .csitemsslidecontent p { font-size: 14px; max-width: 100%; min-height: unset;}
  .csitemsslidecontentemp { display: block; width: 100%; position: relative;  min-height: unset; }
  .csitemsslide .csitemsslidecontent h4 {  font-size: 12px;width: 100%;}
  .csitemsslide .csitemsslidecontent h4:last-child { margin-top:15px;}
  .csitemsslide .csitemsslidecontent h4 strong {  font-size: 20px; letter-spacing: 0px; padding-bottom: 5px; }
  .csitemsslidecontent { min-height: 1px !important; }
  .resourcesHerovid h1{font-size: 12px!important;}
  .resourcesHerovid h2{font-size: 26px!important;}

  .vdcard-container {
    height: unset;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    margin-right: -15px;
  }



  .thumbnail-wrapper {
    width: 100%; 
  }

  .video-thumbnail {
    width: 100%;
    height: auto;
  }

  .slidecardvid {
    width: 100%;
  }
  .vdcard {
    scroll-snap-align: start; 
    box-sizing: border-box; 
    flex: 0 0 80vw; 
    opacity:1;
  }


  /* Optional: Hide scrollbar for better UX */
  .vdcard-container::-webkit-scrollbar {
    display: none;
  }

  .vdcard-container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  .thumbnail-wrapper.left {
    left: 0; 
    right:unset;
  }
  .thumbnail-wrapper.left1 {
    left: 0; 
    right:unset;
  }


  .thumbnail-wrapper.right {
    right: 0;
    left:unset;
  }
  .mute-toggle img, .play-cta img {
    width: 30px;
    height: 30px;
  }
    .vdcard-info{ 
bottom: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  width: 100px;
  text-align: center;
  padding: 8px;
  color: white;
  font-size: 14px;
  z-index: 2;
  flex-shrink: 0;
  transition: all 1s ease;
  min-height: 25px; 
  display: flex;
  align-items: center;
  justify-content: center;
}
  .vdcard-info img {
    width: auto !important;
}
  .csitemsslide .csitemsslideimg{    height: unset;} 

}