appscms-feature.css in appscms-tools-theme-3.8.8

- old
+ new
@@ -281,5 +281,119 @@
   cursor: pointer;
   text-decoration: none;
   max-width: calc(50% - 20px);
   z-index: 2147483647;
 }
+.inforgraphics_section {
+  width: 100%;
+  padding: 50px 0px 50px 0px;
+  border-top: 1px solid rgb(224, 224, 224);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.inforgraphics_section .wrapper {
+  display: flex;
+  max-width: 700px;
+  position: relative;
+}
+
+.inforgraphics_section .wrapper i {
+  top: 50%;
+  height: 44px;
+  width: 44px;
+  color: #343f4f;
+  cursor: pointer;
+  font-size: 1.15rem;
+  position: absolute;
+  text-align: center;
+  line-height: 44px;
+  background: #eee;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.1s linear;
+}
+
+.inforgraphics_section .wrapper i:active {
+  transform: translateY(-50%) scale(0.9);
+}
+
+.inforgraphics_section .wrapper i:hover {
+  background: #f2f2f2;
+}
+
+.inforgraphics_section .wrapper i:first-child {
+  left: 0px;
+  display: none;
+  z-index: 999;
+}
+
+.inforgraphics_section .wrapper i:last-child {
+  right: 0px;
+}
+
+.carousel {
+  display: flex;
+  max-width: 700px;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+.carousel-inner {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.slide {
+  flex: 0 0 calc(100% / 3);
+  scroll-snap-align: start;
+  padding: 20px;
+}
+
+.carousel img {
+  width: 100%;
+  object-fit: contain;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.carousel-inner p {
+  text-align: center;
+  margin: 10px 0;
+  font-size: 14px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+@media screen and (max-width: 768px) {
+  .inforgraphics_section .wrapper {
+    max-width: 100%;
+  }
+
+  .carousel-inner p {
+    font-size: 20px;
+  }
+
+  .inforgraphics_section .wrapper i:first-child {
+    left: 0;
+    /* margin-left: 14px; */
+    z-index: 99;
+  }
+
+  .inforgraphics_section .wrapper i:last-child {
+    right: 0;
+    z-index: 99;
+    display: block !important;
+  }
+
+  .carousel {
+    overflow-x: hidden;
+  }
+
+  .slide {
+    flex: 0 0 100%;
+    margin-right: 0;
+  }
+}