/* in styles.css or globals.css */ @font-face { font-family: "NeueMontreal"; src: url("/fonts/NeueMontreal-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; } @font-face { font-family: "NeueMontreal"; src: url("/fonts/NeueMontreal-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; } body { font-family: "NeueMontreal", sans-serif; } /* .text-stroke-white { -webkit-text-stroke: 3px #e82424; paint-order: stroke fill; } */ .hero-slider { height: 80vh; /* Set a specific height */ } .slide { transition: opacity 1s ease-in-out; } .slide-bg { background-size: cover; background-position: center; transform: scale(1.1); /* Start slightly zoomed in */ transition: transform 7s linear; } /* The Ken Burns (zoom) effect for the active slide */ .slide.active .slide-bg { transform: scale(1); /* Zoom out to normal scale over 7s */ } /* Text Animation styles */ .slide-content > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .slide.active .slide-content > * { opacity: 1; transform: translateY(0); } /* Staggered animation delays for text elements */ .slide.active .slide-content .tagline { transition-delay: 0.3s; } .slide.active .slide-content .title { transition-delay: 0.5s; } .slide.active .slide-content .description { transition-delay: 0.7s; } .slide.active .slide-content .action-button { transition-delay: 0.9s; } /* --- Navigation Styles --- */ /* .hero-overlay { background: linear-gradient( to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100% ); } */ [dir="rtl"] .hero-overlay { background: linear-gradient( to left, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100% ); } a { cursor: pointer; } .nav-link { font-size: small; position: relative; padding-bottom: 4px; cursor: pointer; } .nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0%; height: 2px; background-color: #e82424; transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .social-icon { border: 1px solid #4b5563; color: #d1d5db; transition: all 0.3s ease; } .social-icon:hover { background-color: #e82424; color: white; border-color: #e82424; } .flip-card-container { background-color: transparent; width: 100%; height: 420px; /* Adjusted height for content */ perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; /* ✅ FIXED TYPO */ } .flip-card-container:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* ✅ Ensures text doesn’t mirror */ top: 0; left: 0; } .flip-card-back { transform: rotateY(180deg); } /* Add these styles inside the