New logo

layout/style-scss/nav-menu.scss

@@ -651,3 +651,96 @@ header#header {
 		}
 	}
 }
+
+.header-logo {
+	min-height: 45px;
+
+	.box-logo-relative {
+		position: relative;
+		transform-style: preserve-3d;
+		width: 100%;
+		height: 100%;
+
+		.box-logo-absolute {
+			position: absolute;
+			top: 0;
+			left: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 120px;
+			height: 46px;
+			object-fit: contain;
+			backface-visibility: hidden;
+			-webkit-backface-visibility: hidden;
+			-moz-animation: action-logo 4s linear infinite alternate;
+			-webkit-animation: action-logo 4s linear infinite alternate;
+			-ms-animation: none;
+
+			&.box-logo-absolute-front {
+			}
+			&.box-logo-absolute-back {
+				transform: rotateY(180deg);
+				-moz-animation: action-logo-back 4s linear infinite alternate;
+				-webkit-animation: action-logo-back 4s linear infinite alternate;
+				-ms-animation: none;
+			}
+
+			img {
+				width: 100%;
+				height: 46px;
+				object-fit: contain;
+			}
+		}
+	}
+}
+@keyframes action-logo {
+	0% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	40% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	61% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	100% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+}
+@keyframes action-logo-back {
+	0% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	40% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	61% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	100% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+}

templates_user/components/nav-menu-2.php

@@ -76,9 +76,21 @@
         <div class="container">
             <div class="header-data">
                 <div class="header-logo">
-                    <a href="/">
+                    <!-- <a href="/">
-                    <img alt="" src="/upload/filemanager/icon/new-logo.svg" />
+                        <img alt="" src="/upload/filemanager/icon/new-logo.svg" />
-                    </a>
+                    </a> -->
+                    <div class="box-logo-relative">
+                        <div class="box-logo-absolute box-logo-absolute-front">
+                            <a href="/">
+                                <img src="/upload/filemanager/images/VIDOK-logo-new.png" alt="logo">
+                            </a>
+                        </div>
+                        <div class="box-logo-absolute box-logo-absolute-back">
+                            <a href="/">
+                                <img src="/upload/filemanager/images/VIDOK-COM_PL-2025.png" alt="logo">
+                            </a>
+                        </div>
+                    </div>
                 </div>
 
                 <div id="header-nav">