@charset "UTF-8";

.card0 {
  scroll-ansp-align: start;
  flex: 0 0 20em;
  aspect-ratio: 16 / 9;
  background-color: #ffffff;
  padding: 0 0 20px 0;
  border-radius: .5em;
  text-align: center;
  align-content: center;
  border-radius: 20px;
}





.carousel01 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel01;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel01::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

.carousel01::-webkit-scrollbar{
  display: none;
}
.carousel01::scroll-button(right), .carousel01::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel01;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel01::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel01::scroll-button(right):disabled, .carousel01::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}


.carousel02 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel02;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel02::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.carousel02::-webkit-scrollbar{
  display: none;
}
.carousel02::scroll-button(right), .carousel02::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel02;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel02::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel02::scroll-button(right):disabled, .carousel02::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}



.carousel03 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel03;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel03::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.carousel03::-webkit-scrollbar{
  display: none;
}
.carousel03::scroll-button(right), .carousel03::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel03;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel03::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel03::scroll-button(right):disabled, .carousel03::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}


.carousel04 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel04;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel04::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.carousel04::-webkit-scrollbar{
  display: none;
}
.carousel04::scroll-button(right), .carousel04::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel04;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel04::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel04::scroll-button(right):disabled, .carousel04::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}

.carousel05 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel05;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel05::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.carousel05::-webkit-scrollbar{
  display: none;
}
.carousel05::scroll-button(right), .carousel05::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel05;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel05::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel05::scroll-button(right):disabled, .carousel05::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}

/* CSS Code for devices < 800px */
@media (min-width: 1000px) {
 .carousel01::scroll-button(right), .carousel01::scroll-button(left)  {
  display: none;   
 }
 
  .carousel02::scroll-button(right), .carousel02::scroll-button(left)  {
  display: none;   
 }
 
   .carousel03::scroll-button(right), .carousel03::scroll-button(left)  {
  display: none;   
 }
 
   .carousel04::scroll-button(right), .carousel04::scroll-button(left)  {
  display: none;   
 }
 
 
    .carousel05::scroll-button(right), .carousel05::scroll-button(left)  {
  display: none;   
 }
 
}


@media(max-width: 500px) {

.card0 {
  
flex: 0 0,100%;

  
}

}