<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .bancontainer {
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 28px;
        }
        
        .banner-container {
            width: 100%;
            overflow: hidden;
        }
        
        .banner {
            display: flex;
            animation: slide 15s linear infinite;
            width: 200%; /* Double width for seamless loop */
        }
        
        .logo {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo img {
			width: 80% !important;
            max-height: 100%;
            
            filter: grayscale(30%);
            transition: all 0.3s ease;
        }
        
        .logo img:hover {
            filter: grayscale(0%);
            transform: scale(1.05);
        }
        
        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%); /* Move by half the width */
            }
        }
        
        .banner-container:hover .banner {
            animation-play-state: paused;
        }
        
        .note {
            margin-top: 20px;
            color: #7f8c8d;
            font-size: 14px;
        }
    </style>
</head>
<body>
  <!--  <div class="bancontainer">
        
        <div class="banner-container">
            <div class="banner" style="margin-top: -63px;">
               
                <div class="logo">
                    <img src="assets/img/BU_0.png" alt="ASKARI">
                </div>
                <div class="logo">
                    <img src="assets/img/ANF_0.png" alt="GEMENT">
                </div>
                <div class="logo">
                    <img src="assets/img/Askari.png" alt="IDC">
                </div>
                <div class="logo">
                    <img src="assets/img/BU_0.png" alt="ASKARI">
                </div>
                <div class="logo">
                    <img src="assets/img/ANF_0.png" alt="GEMENT">
                </div>
                <div class="logo">
                    <img src="assets/img/Askari.png" alt="IDC">
                </div>
                
              
                <div class="logo">
                    <img src="assets/img/BU_0.png" alt="ASKARI">
                </div>
                <div class="logo">
                    <img src="assets/img/ANF_0.png" alt="GEMENT">
                </div>
                <div class="logo">
                    <img src="assets/img/Askari.png" alt="IDC">
                </div>
                <div class="logo">
                    <img src="assets/img/BU_0.png" alt="ASKARI">
                </div>
                <div class="logo">
                    <img src="assets/img/ANF_0.png" alt="GEMENT">
                </div>
                <div class="logo">
                    <img src="assets/img/Askari.png" alt="IDC">
                </div>
               
            </div>
        </div>
            </div> -->
            	<br><br><br><br><br>
	<h1 style="text-align: center;">Coming Soon</h1>
	<br><br><br><br><br>
            
</body>
</html>