.App{overflow:hidden;min-height:100vh;background-color:#282c34;color:#fff;flex-direction:column;position:relative}.App,.banner{width:100%;display:flex;align-items:center}.banner{background-color:#171212;color:#c5cddc;padding:10px 20px;justify-content:space-between;position:fixed;top:0;z-index:10;box-shadow:0 4px 8px rgba(0,0,0,.2)}.left-section{justify-content:flex-start}.left-section,.middle-section{display:flex;align-items:center;flex:1 1}.middle-section{justify-content:center}.right-section{display:flex;gap:20px;justify-content:flex-end;flex:1 1}.banner2{background-color:#61dafb;height:2px;position:fixed;top:0;z-index:10}.banner2,.banner3{width:100%;display:flex}.banner3{background-color:#fff;justify-content:center;align-items:center;position:absolute;top:1px;bottom:0;z-index:0;margin:0;padding:0;background-image:url(/images/background.jpg);background-size:cover;background-position:50%;background-repeat:no-repeat;background-attachment:fixed;overflow-y:hidden}.banner .logo{width:45px;height:55px;margin-left:10px;border:2px solid #fff;border-radius:5px}.banner .logo:hover{transform:scale(1.1);transition:transform .3s ease}.second-logo{width:200px;height:65px;margin:0 auto;border:2px solid #61dafb;border-radius:5px}h1{margin-top:40px;font-size:4.2rem;font-family:Verdana,Geneva,Tahoma,sans-serif;color:#fff;text-shadow:-.5px -.5px 0 #000,.5px -.5px 0 #000,-.5px .5px 0 #000,.5px .5px 0 #000}.tab svg{margin-right:11px;vertical-align:middle}.envelope-icon,.github-icon,.home-icon,.user-icon,.youtube-icon{font-size:34px;vertical-align:middle;color:#61dafb}.tab:hover .envelope-icon,.tab:hover .github-icon,.tab:hover .home-icon,.tab:hover .user-icon,.tab:hover .youtube-icon{color:#fff;transform:scale(1.1);transition:transform .3s ease;cursor:pointer}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background:linear-gradient(145deg,#1e1e1e,#282c34);padding:30px;border:2px solid #61dafb;border-radius:15px;max-width:500px;width:90%;text-align:center;color:#fff;box-shadow:0 8px 16px rgba(0,0,0,.3);font-family:Verdana,Geneva,Tahoma,sans-serif}.modal h2{font-size:2rem;margin-bottom:20px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2)}.modal p{font-size:1.1rem;line-height:1.6;margin-bottom:20px;color:#ddd}.modal ul{list-style-type:none;padding:0;margin-bottom:20px}.modal ul li{font-size:1rem;padding:10px;background-color:rgba(97,218,251,.1);margin-bottom:10px;border-radius:5px;border-left:3px solid #61dafb;text-align:left}.modal button{margin-top:20px;padding:12px 24px;background-color:#61dafb;border-radius:7px;border:1px solid #000;color:#282c34;cursor:pointer;font-size:1rem;font-weight:700;transition:background-color .3s ease,transform .2s ease}.modal button:hover{background-color:#4fa8d3;transform:translateY(-2px)}.modal button:active{transform:translateY(0)}.search-bar-container{position:relative;display:flex;justify-content:center;margin-top:-13em}.search-bar-wrapper{position:relative;width:28em}.search-bar{width:100%;padding:10px 40px 10px 20px;border:2px solid #61dafb;border-radius:25px;outline:none;font-size:1rem;color:#fff;background-color:hsla(0,0%,100%,.1);transition:border-color .3s ease}.search-bar::placeholder{color:#aaa}.search-bar:focus{border-color:#4fa8d3}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#61dafb;font-size:1.2rem;pointer-events:none}.dropdown{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:27em;max-height:200px;overflow-y:auto;background-color:#282c34;border:1px solid #61dafb;border-radius:5px;z-index:1000;font-family:Verdana,Geneva,Tahoma,sans-serif}.dropdown-item{padding:10px;color:#fff;cursor:pointer;transition:background-color .3s ease}.dropdown-item:hover{background-color:rgba(97,218,251,.1)}.map-page{display:flex;flex-direction:column;min-height:100vh;background:#282c34;color:#fff}.bannermp{position:fixed;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background-color:#1a1a1a;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 8px rgba(0,0,0,.2);z-index:10}.bannermp .logo{width:45px;height:55px;margin-left:10px;border:2px solid #fff;border-radius:5px}.bannermp .logo:hover{transform:scale(1.1);transition:transform .3s ease}.banner2mp{position:fixed;height:2px;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background-color:#61dafb;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 8px rgba(0,0,0,.2);z-index:11}.map-content{flex:1 1;padding:20px;max-width:1200px;width:100%;position:relative;text-align:center;margin:6.5em auto 0}.back-button{position:fixed;left:20px;top:100px;display:flex;align-items:center;background:none;border:none;cursor:pointer;font-size:16px;color:#fff;padding:10px;z-index:1;transition:opacity .3s ease}.back-button:hover{opacity:.8;color:#fff;transform:scale(1.1);transition:transform .3s ease;cursor:pointer}.arrow-icon{font-size:38px;vertical-align:middle;color:#61dafb;margin-right:8px}.back-text{font-weight:700;font-size:1.4em;font-family:Verdana,Geneva,Tahoma,sans-serif}.map-title{text-align:center;color:#fff;margin:20px 0;font-size:2.5rem;line-height:1.2;min-height:60px}.videos-container{display:flex;flex-direction:column;width:70vw;height:auto;gap:40px;margin:30px auto 0;max-width:800px}.video-card{background:rgba(0,0,0,.3);border:1.5px solid #61dafb;border-radius:10px;padding:20px;transition:transform .3s ease;width:100%;max-width:800px;margin:0 auto}.video-card:hover{transform:translateY(-5px)}.video-card h3{margin-bottom:15px;color:#fff;font-family:Verdana,Geneva,Tahoma,sans-serif}.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;border-radius:8px;overflow:hidden}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}@media (max-width:768px){.banner,.banner.mp{padding:10px;width:100%;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;z-index:10;box-shadow:0 4px 8px rgba(0,0,0,.2)}.banner .logo,.bannermp .logo{width:35px;height:45px}.second-logo{width:150px;height:65px;margin-right:15px}.envelope-icon,.github-icon,.home-icon,.user-icon,.youtube-icon{font-size:28px}.right-section{gap:2px}.banner3{padding:0 10px}.search-bar,.search-bar-wrapper{width:100%;min-width:90vw}.search-bar{font-size:1rem;padding:12px 42px 12px 18px;margin-top:-20px}.search-icon{font-size:1.3rem;right:15px;margin-bottom:10px;margin-top:-8px}.dropdown{width:100%;max-width:500px;left:50%;transform:translateX(-50%)}.map-title{margin-top:70px;font-size:2rem}.map-content{margin-top:140px}.videos-container{width:90vw;max-width:100%;gap:20px}.video-card{width:100%;max-width:100%;padding:15px}.video-wrapper{padding-bottom:56.25%}.video-wrapper iframe{width:100%;height:100%}}*{margin:0;padding:0;box-sizing:border-box}#root,body,html{width:100%;height:100%}