Add files via upload

added certifications section

Author: mosbat

github-logo.png

@@ -298,6 +298,54 @@
     .faq-question:hover {
       background-color: #0056b3;
     }
+
+    .carousel {
+      position: relative;
+      max-width: 500px;
+      margin: 20px auto;
+      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .carousel-inner {
+      display: flex;
+      transition: transform 0.5s ease-in-out;
+    }
+
+    .carousel-item {
+      min-width: 100%;
+      box-sizing: border-box;
+    }
+
+    .carousel-item img {
+      width: 100%;
+      height: auto;
+    }
+
+    .carousel-controls {
+      position: absolute;
+      top: 90%;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      
+      transform: translateY(-50%);
+    }
+
+    .carousel-controls button {
+      background: rgba(0, 0, 0, 0.5);
+      border: none;
+      color: #fff;
+      font-size: 18px;
+      padding: 10px;
+      cursor: pointer;
+    }
+
+    .carousel-controls button:hover {
+      background: rgba(0, 0, 0, 0.8);
+    }
+
   </style>
 </head>
 
@@ -382,6 +430,41 @@ <h1>Prices</h1>
     <p style="color: #121212; padding-left: 10%;"><b>Prices of all services are quoted on a case by case basis depending on the scale.</b></p>
     <p style="color: #121212; padding-left: 10%;"><b>Minimum: <i>EUR 1,600</i></b></p>
     <hr>
+    <div class="section">
+      <h2>Certified By</h2>
+      <div class="carousel">
+        <div class="carousel-inner" id="carouselInner">
+          <div class="carousel-item">
+            <img src="oracle-logo.png" alt="Client 1 Logo">
+          </div>
+          <div class="carousel-item">
+            <img src="github-logo.png" alt="Client 2 Logo">
+          </div>
+          <div class="carousel-item">
+            <img src="microsoft-logo.png" alt="Client 2 Logo">
+          </div>
+          <div class="carousel-item">
+            <img src="isc2-logo.png" alt="Client 2 Logo">
+          </div>
+        </div>
+        <div class="carousel-controls">
+          <button onclick="moveSlide(-1)">&lt;</button>
+          <button onclick="moveSlide(1)">&gt;</button>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      let currentSlide = 0;
+
+      function moveSlide(direction) {
+        const carouselInner = document.getElementById('carouselInner');
+        const items = document.querySelectorAll('.carousel-item');
+        currentSlide = (currentSlide + direction + items.length) % items.length;
+        carouselInner.style.transform = `translateX(-${currentSlide * 100}%)`;
+      }
+    </script>
+    <hr>
     <div class="faq-container">
       <div class="faq-item">
         <div class="faq-question">What is escrow and how does it work?</div>
@@ -711,4 +794,4 @@ <h2><b>To get in touch</b></h2>
 
 
 
-</html>
+</html>