
.content-roller-container {
  overflow: hidden; /* Prevent vertical scrollbars */
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-roll {
  display: flex;
  flex-direction: row; /* Horizontal layout for children */
  gap: 10px; /* Optional spacing between items */
  overflow-x: auto; /* Enable horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scroll for better UX */
  width: 100%;
}


/* .culture-gallary .row.scroll-right .gallery-class .gray:nth-child(2){ border: 1px solid orange;}
.culture-gallary .row.scroll-left .gallery-class .green:nth-child(2) { border: 1px solid orange;} */


/* G1 */
#gallery-class .row.scroll-g1 div:nth-child(1) {  background-image: url('images/class/fi-1.png');}
#gallery-class .row.scroll-g1 div:nth-child(2) {  background-image: url('images/class/fi-2.png');}
#gallery-class .row.scroll-g1 div:nth-child(3) {  background-image: url('images/class/fi-3.png');}
#gallery-class .row.scroll-g1 div:nth-child(4) {  background-image: url('images/class/fi-4.png');}
#gallery-class .row.scroll-g1 div:nth-child(5) {  background-image: url('images/class/fi-5.png');}
#gallery-class .row.scroll-g1 div:nth-child(6) {  background-image: url('images/class/fi-6.png');}
#gallery-class .row.scroll-g1 div:nth-child(7) {  background-image: url('images/class/fi-7.png');}
#gallery-class .row.scroll-g1 div:nth-child(8) {  background-image: url('images/class/fi-8.png');}
#gallery-class .row.scroll-g1 div:nth-child(9) {  background-image: url('images/class/fi-9.png');}
#gallery-class .row.scroll-g1 div:nth-child(10) {  background-image: url('images/class/fi-10.png');}


/* G2 */
#gallery-class .row.scroll-g2 div:nth-child(1) {   background-image: url('images/class/fi-11.png');}
#gallery-class .row.scroll-g2 div:nth-child(2) {   background-image: url('images/class/fi-12.png');}
#gallery-class .row.scroll-g2 div:nth-child(3) {   background-image: url('images/class/fi-13.png');}
#gallery-class .row.scroll-g2 div:nth-child(4) {   background-image: url('images/class/fi-14.png');}
#gallery-class .row.scroll-g2 div:nth-child(5) {   background-image: url('images/class/fi-15.png');}
#gallery-class .row.scroll-g2 div:nth-child(6) {   background-image: url('images/class/fi-16.png');}
#gallery-class .row.scroll-g2 div:nth-child(7) {   background-image: url('images/class/fi-17.png');}
#gallery-class .row.scroll-g2 div:nth-child(8) {   background-image: url('images/class/fi-18.png');}
#gallery-class .row.scroll-g2 div:nth-child(9) {   background-image: url('images/class/fi-19.png');}
#gallery-class .row.scroll-g2 div:nth-child(10) {   background-image: url('images/class/fi-20.png');}


/* G3 */
#gallery-class .row.scroll-g3 div:nth-child(1) {   background-image: url('images/class/fi-21.png');}
#gallery-class .row.scroll-g3 div:nth-child(2) {   background-image: url('images/class/fi-22.png');}
#gallery-class .row.scroll-g3 div:nth-child(3) {   background-image: url('images/class/fi-23.png');}
#gallery-class .row.scroll-g3 div:nth-child(4) {   background-image: url('images/class/fi-24.png');}
#gallery-class .row.scroll-g3 div:nth-child(5) {   background-image: url('images/class/fi-25.png');}
#gallery-class .row.scroll-g3 div:nth-child(6) {   background-image: url('images/class/fi-26.png');}
#gallery-class .row.scroll-g3 div:nth-child(7) {   background-image: url('images/class/fi-27.png');}
#gallery-class .row.scroll-g3 div:nth-child(8) {   background-image: url('images/class/fi-28.png');}
#gallery-class .row.scroll-g3 div:nth-child(9) {   background-image: url('images/class/fi-29.png');}
#gallery-class .row.scroll-g3 div:nth-child(10) {   background-image: url('images/class/fi-30.png');}


/* G4 */
#gallery-class .row.scroll-g4 div:nth-child(1) {   background-image: url('images/class/fi-31.png');}
#gallery-class .row.scroll-g4 div:nth-child(2) {   background-image: url('images/class/fi-32.png');}
#gallery-class .row.scroll-g4 div:nth-child(3) {   background-image: url('images/class/fi-33.png');}
#gallery-class .row.scroll-g4 div:nth-child(4) {   background-image: url('images/class/fi-34.png');}
#gallery-class .row.scroll-g4 div:nth-child(5) {   background-image: url('images/class/fi-35.png');}
#gallery-class .row.scroll-g4 div:nth-child(6) {   background-image: url('images/class/fi-36.png');}
#gallery-class .row.scroll-g4 div:nth-child(7) {   background-image: url('images/class/fi-37.png');}
#gallery-class .row.scroll-g4 div:nth-child(8) {   background-image: url('images/class/fi-38.png');}
#gallery-class .row.scroll-g4 div:nth-child(9) {   background-image: url('images/class/fi-39.png');}
#gallery-class .row.scroll-g4 div:nth-child(10) {   background-image: url('images/class/fi-40.png');}


/* G5 */
#gallery-class .row.scroll-g5 div:nth-child(1) {   background-image: url('images/class/fi-41.png');}
#gallery-class .row.scroll-g5 div:nth-child(2) {   background-image: url('images/class/fi-42.png');}
#gallery-class .row.scroll-g5 div:nth-child(3) {   background-image: url('images/class/fi-43.png');}
#gallery-class .row.scroll-g5 div:nth-child(4) {   background-image: url('images/class/fi-44.png');}
#gallery-class .row.scroll-g5 div:nth-child(5) {   background-image: url('images/class/fi-45.png');}
#gallery-class .row.scroll-g5 div:nth-child(6) {   background-image: url('images/class/fi-46.png');}
#gallery-class .row.scroll-g5 div:nth-child(7) {   background-image: url('images/class/fi-47.png');}
#gallery-class .row.scroll-g5 div:nth-child(8) {   background-image: url('images/class/fi-48.png');}
#gallery-class .row.scroll-g5 div:nth-child(9) {   background-image: url('images/class/fi-49.png');}
#gallery-class .row.scroll-g5 div:nth-child(10) {   background-image: url('images/class/fi-50.png');}

/* G6 */
#gallery-class .row.scroll-g6 div:nth-child(1) {   background-image: url('images/class/fi-51.png');}
#gallery-class .row.scroll-g6 div:nth-child(2) {   background-image: url('images/class/fi-52.png');}
#gallery-class .row.scroll-g6 div:nth-child(3) {   background-image: url('images/class/fi-53.png');}
#gallery-class .row.scroll-g6 div:nth-child(4) {   background-image: url('images/class/fi-54.png');}
#gallery-class .row.scroll-g6 div:nth-child(5) {   background-image: url('images/class/fi-55.png');}
#gallery-class .row.scroll-g6 div:nth-child(6) {   background-image: url('images/class/fi-56.png');}
#gallery-class .row.scroll-g6 div:nth-child(7) {   background-image: url('images/class/fi-57.png');}
#gallery-class .row.scroll-g6 div:nth-child(8) {   background-image: url('images/class/fi-58.png');}
#gallery-class .row.scroll-g6 div:nth-child(9) {   background-image: url('images/class/fi-59.png');}
#gallery-class .row.scroll-g6 div:nth-child(10) {   background-image: url('images/class/fi-60.png');}

/* G7 */
#gallery-class .row.scroll-g7 div:nth-child(1) {   background-image: url('images/class/fi-61.png');}
#gallery-class .row.scroll-g7 div:nth-child(2) {   background-image: url('images/class/fi-62.png');}
#gallery-class .row.scroll-g7 div:nth-child(3) {   background-image: url('images/class/fi-63.png');}
#gallery-class .row.scroll-g7 div:nth-child(4) {   background-image: url('images/class/fi-64.png');}
#gallery-class .row.scroll-g7 div:nth-child(5) {   background-image: url('images/class/fi-65.png');}
#gallery-class .row.scroll-g7 div:nth-child(6) {   background-image: url('images/class/fi-66.png');}
#gallery-class .row.scroll-g7 div:nth-child(7) {   background-image: url('images/class/fi-67.png');}
#gallery-class .row.scroll-g7 div:nth-child(8) {   background-image: url('images/class/fi-68.png');}
#gallery-class .row.scroll-g7 div:nth-child(9) {   background-image: url('images/class/fi-69.png');}
#gallery-class .row.scroll-g7 div:nth-child(10) {   background-image: url('images/class/fi-70.png');}
