/* ============================================ GATEWAY - Vertical Stacked Landing Triple Aces:IT Solution & Event Organizer ============================================ *//* Font Faces */@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');font-weight:200 800;font-display:swap;}@font-face{font-family:'Rubik';src:url('../fonts/Rubik-Variable.woff2') format('woff2');font-weight:300 900;font-display:swap;}/* Gateway Layout */.gateway{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden;font-family:'Bricolage Grotesque',sans-serif;}/* Sections */.gateway__section{position:relative;width:100%;display:flex;overflow:hidden;text-decoration:none;color:#ffffff;}/* Section 1 - Header (30%) */.gateway__section--header{height:30vh;background-color:#8B3A3A;/* Dark brownish-red */ align-items:center;justify-content:center;}.gateway__header-content{display:flex;align-items:center;gap:1.5rem;animation:fadeIn 1s ease-out forwards;}.gateway__logo{height:84px;width:auto;}.gateway__tagline{font-size:2.5rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;margin:0;line-height:1.1;}/* Section Content Base for IT and EO */.gateway__section-content{padding-left:8%;display:flex;flex-direction:column;justify-content:center;width:100%;z-index:2;position:relative;transition:transform 0.4s ease;}.gateway__section:hover .gateway__section-content{transform:translateX(20px);}/* Section 2 - IT Solution (35%) */.gateway__section--it{height:35vh;background-color:#E8907A;/* Salmon/coral/pink */}/* Section 3 - Event Management (35%) */.gateway__section--eo{height:35vh;background-color:#1A7A6E;/* Teal/dark green */}/* Typography Groups */.gateway__title-group{display:flex;flex-direction:column;margin-bottom:0.5rem;}.gateway__title-outline{font-size:9rem;font-weight:800;line-height:0.8;margin:0;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,0.4);transition:-webkit-text-stroke-color 0.4s ease;}.gateway__section:hover .gateway__title-outline{-webkit-text-stroke-color:rgba(255,255,255,0.8);}.gateway__subtitle{font-size:3.8rem;font-weight:800;text-transform:uppercase;letter-spacing:0.15em;margin:0;line-height:0.9;margin-top:-0.5rem;/* Slight overlap with outline text */ z-index:2;}.gateway__section--it .gateway__subtitle{color:#ffffff;}.gateway__section--eo .gateway__subtitle{color:#E8907A;/* Coral text on teal background */}.gateway__desc{font-family:'Rubik',sans-serif;font-size:1.5rem;font-style:italic;font-weight:300;color:#ffffff;margin:0;margin-top:0.5rem;margin-left:0.5rem;}/* Hover overlays */.gateway__section::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background 0.4s ease;z-index:1;}.gateway__section:hover::after{background:rgba(0,0,0,0.05);}/* Animations */@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}/* Gateway Language Switch (top right,no nav bar) */.gateway__lang{position:absolute;top:1.5rem;right:1.5rem;z-index:100;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.8);text-decoration:none;padding:0.5rem 1rem;border:1px solid rgba(255,255,255,0.3);border-radius:4px;transition:background 0.3s ease,color 0.3s ease;}.gateway__lang:hover{background:rgba(255,255,255,0.15);color:#ffffff;border-color:rgba(255,255,255,0.6);}/* Footer Gateway */.footer--gateway{position:absolute;bottom:0;left:0;right:0;z-index:10;background:transparent;padding:1rem 0;text-align:center;}.footer--gateway .footer__copyright{color:rgba(255,255,255,0.5);font-size:0.7rem;}.footer--gateway .footer__copyright a{color:rgba(232,157,30,0.8);}/* Nav Switch Division Button */.nav__switch{font-size:0.875rem;font-weight:600;text-decoration:none;color:var(--on-surface);transition:color 0.2s ease;white-space:nowrap;}.nav__switch:hover{color:var(--primary);}/* ============================================ RESPONSIVE ============================================ *//* Tablet */@media (max-width:1024px){.gateway__title-outline{font-size:8rem;}.gateway__subtitle{font-size:3rem;}.gateway__desc{font-size:1.2rem;}.gateway__tagline{font-size:1.8rem;}.gateway__logo{height:64px;}}/* Mobile */@media (max-width:768px){.gateway__header-content{flex-direction:column;gap:0.5rem;}.gateway__title-outline{font-size:6rem;}.gateway__subtitle{font-size:2.2rem;margin-top:-0.5rem;}.gateway__desc{font-size:1rem;margin-left:0.2rem;}.gateway__tagline{font-size:1.4rem;}.gateway__logo{height:52px;}.gateway__lang{top:1rem;right:1rem;}}/* Small mobile */@media (max-width:480px){.gateway__title-outline{font-size:4.5rem;}.gateway__subtitle{font-size:1.6rem;margin-top:-0.25rem;}.gateway__desc{font-size:0.9rem;}}