/* Font (βάλε και στο ) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); /* Flex helpers — αν ΔΕΝ έχεις Bootstrap */ .hero .d-flex { display: flex !important; } .hero .align-items-center { align-items: center !important; } .hero .justify-content-center { justify-content: center !important; } .hero .text-center { text-align: center !important; } /* Hero base */ .hero { position: relative; color: #fff; overflow: hidden; font-family: "Montserrat", sans-serif; } .hero.full-height { height: 100vh; } @media (max-width: 991px) { .hero.full-height { min-height: 600px; } } @media (max-width: 767px) { .hero.full-height { height: 87vh; } } .hero.home-search { overflow: visible; } /* Jarallax video background */ .jarallax { position: relative; z-index: 0; } .jarallax > .jarallax-img { position: absolute; object-fit: cover; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* Dark overlay */ .opacity-mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; } .hero .wrapper { position: relative; height: 100%; width: 100%; } .hero .wrapper small { text-transform: uppercase; letter-spacing: 3px; display: block; margin: 0 0 10px; color: #ebd7b2; font-weight: 600; } .hero .wrapper h3 { color: #fff; font-size: 3.1875rem; margin: 0; font-weight: 700; text-transform: uppercase; line-height: 1.15; } @media (max-width: 767px) { .hero .wrapper h3 { font-size: 2.625rem; } } /* Scroll mouse */ .mouse_wp { position: absolute; right: 30px; bottom: 30px; width: 40px; z-index: 999; } .mouse { background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #fff 50%, #fff 100%); width: 36px; height: 58px; border-radius: 100px; background-size: 100% 200%; animation: colorSlide 15s linear infinite, nudgeMouse 15s ease-out infinite; } .mouse:before, .mouse:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .mouse:before { width: 32px; height: 54px; background-color: #222a30; border-radius: 100px; } .mouse:after { background-color: #fff; width: 5px; height: 5px; border-radius: 100%; animation: trackBallSlide 15s linear infinite; } @keyframes colorSlide { 0% { background-position: 0% 100%; } 20% { background-position: 0% 0%; } 21% { background-color: #4e5559; } 29.99% { background-color: #fff; background-position: 0% 0%; } 30% { background-color: #4e5559; background-position: 0% 100%; } 50% { background-position: 0% 0%; } 51% { background-color: #4e5559; } 59% { background-color: #fff; background-position: 0% 0%; } 60% { background-color: #4e5559; background-position: 0% 100%; } 80% { background-position: 0% 0%; } 81% { background-color: #4e5559; } 90%, 100% { background-color: #fff; } } @keyframes trackBallSlide { 0% { opacity: 1; transform: scale(1) translateY(-20px); } 6% { opacity: 1; transform: scale(0.9) translateY(5px); } 14% { opacity: 0; transform: scale(0.4) translateY(40px); } 15%, 19% { opacity: 0; transform: scale(0.4) translateY(-20px); } 28%, 29.99% { opacity: 1; transform: scale(1) translateY(-20px); } 30% { opacity: 1; transform: scale(1) translateY(-20px); } 36% { opacity: 1; transform: scale(0.9) translateY(5px); } 44% { opacity: 0; transform: scale(0.4) translateY(40px); } 45%, 49% { opacity: 0; transform: scale(0.4) translateY(-20px); } 58%, 59.99% { opacity: 1; transform: scale(1) translateY(-20px); } 60% { opacity: 1; transform: scale(1) translateY(-20px); } 66% { opacity: 1; transform: scale(0.9) translateY(5px); } 74% { opacity: 0; transform: scale(0.4) translateY(40px); } 75%, 79% { opacity: 0; transform: scale(0.4) translateY(-20px); } 88%, 100% { opacity: 1; transform: scale(1) translateY(-20px); } } @keyframes nudgeMouse { 0% { transform: translateY(0); } 20% { transform: translateY(8px); } 30% { transform: translateY(0); } 50% { transform: translateY(8px); } 60% { transform: translateY(0); } 80% { transform: translateY(8px); } 90% { transform: translateY(0); } } /* Text animations */ .slide-animated { transform: translateY(20px); opacity: 0; visibility: hidden; transition: all 0.05s ease; } .animate_hero.is-transitioned .slide-animated { transform: none; opacity: 1; visibility: visible; transition: all 0.5s ease; } .animate_hero.is-transitioned .slide-animated.one { transition-delay: 0.5s; } .animate_hero.is-transitioned .slide-animated.two { transition-delay: 0.7s; } .animate_hero.is-transitioned .slide-animated.four { transition-delay: 2.5s; }