header { width: 100%; background: #fff; border-bottom: 1px solid #eee; display: flex; justify-content: center; position: fixed; top: 0; left: 0; z-index: 999; } .header-container { width: 90%; max-width: 1250px; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .left-section-nav { display: flex; align-items: center; gap: 18px; } .logo-nav { display: flex; align-items: center; justify-content: center; height: 35px; } .logo-nav img { width: 120px; } .right-section-nav { display: flex; align-items: center; gap: 25px; } .right-section-nav a { text-decoration: none; color: #222; font-size: 13px; transition: 0.2s; } .right-section-nav a:hover { color: var(--orange); } .login-btn { background: var(--orange); color: #fff !important; padding: 8px 22px; border-radius: 20px; font-weight: 600; transition: 0.3s ease; } .login-btn:hover { background: var(--hover-color); transform: translateY(-2px); } .contact-section { display: flex; align-items: center; gap: 15px; margin-left: 10px; padding-left: 15px; border-left: 1px solid #eee; } .phone-number { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #333; font-weight: 500; } .mobile-icons .login-icon { color: #222; font-size: 22px; display: flex; align-items: center; justify-content: center; text-decoration: none; } .phone-icon { color: #28a745; font-size: 16px; } .whatsapp-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #25d366; border-radius: 50%; color: white !important; font-size: 20px; position: relative; transition: transform 0.2s; } .whatsapp-link:hover { transform: scale(1.1); } .whatsapp-link::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(37, 211, 102, 0.4); animation: ring 2s infinite; z-index: -1; } .lang-select { display: flex; align-items: center; gap: 6px; text-decoration: none; color: #000; font-weight: 500; font-size: 14px; } .flag-icon { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; } .dropdown-arrow { font-size: 10px; color: #555; margin-left: 2px; } @keyframes ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .menu-toggle { display: none; font-size: 24px; cursor: pointer; color: #333; } .mobile-icons { display: none; align-items: center; gap: 15px; font-size: 20px; } .mobile-icons a { text-decoration: none; color: #222; font-size: 22px; } .mobile-icons .login-btn { font-size: 14px; padding: 6px 16px; } .with-shake { display: inline-block; animation: ring 1.2s infinite; transform-origin: 50% 0; font-size: 18px; } @keyframes ring { 0% { transform: rotate(0); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-15deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 50% { transform: rotate(5deg); } 60% { transform: rotate(-5deg); } 70%, 100% { transform: rotate(0); } } .with-shake i { color: #28a745; } .dropdown { position: relative; display: inline-block; } .dropbtn { color: #333; text-decoration: none; padding: 10px 0; display: inline-block; transition: color 0.3s; } .dropbtn:hover { color: #ff5b00; } .dropdown-content { display: none; position: absolute; background-color: #fff; min-width: 240px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); border-radius: 8px; z-index: 999; top: 100%; left: 0; } .dropdown-content a { color: #333; padding: 10px 16px; text-decoration: none; display: block; transition: background 0.3s, color 0.3s; } #user-logo-i{ color: white; } .dropdown:hover .dropdown-content { display: inline; } .dropdown i { font-size: 10px; color: #000000; margin-left: 2px; } .dropdown .fa { margin-right: 3px; } @media (max-width: 968px) { .menu-toggle { display: block; } .dropdown { width: 100%; } .dropdown-content { position: relative; box-shadow: none; border-radius: 0; } .right-section-nav { flex-direction: column; align-items: flex-start; background: #fff; position: absolute; top: 100%; right: 0; width: 100%; border-top: 1px solid #eee; padding: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .right-section-nav.active { max-height: fit-content; opacity: 1; padding: 20px 0; text-align: center; } .right-section-nav a { width: 100%; padding: 12px 20px; border-bottom: 1px solid #f0f0f0; font-size: 13px; justify-content: center; } .right-section-nav a:last-child { border-bottom: none; } .right-section-nav .login-btn { margin: 10px 20px 0; width: calc(100% - 40px); text-align: center; padding: 10px; } .phone-number { font-size: 16px; justify-content: center; } .whatsapp-link { width: 50px; height: 50px; font-size: 24px; } .mobile-icons { display: flex; } .contact-section { display: none; } #mobi-login { display: none; } #mobi-lang { display: none; } .menu-toggle { font-size: 22px; } .vue-sticky-placeholder { padding-top: 50px; } } @media (max-width: 720px) { .header-container { padding: 10px 0; } .vue-sticky-placeholder { padding-top: 45px; } }