.video-page{padding:20px;max-width:1200px;margin:0 auto;height:100%;overflow-y:auto}.video-header{text-align:center;margin-bottom:40px}.video-header h1{font-size:2.5rem;margin-bottom:10px;font-weight:300;color:#fefefe}.video-header p{font-size:1.1rem;color:#cccccc;margin:0}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:20px;gap:20px;margin-bottom:100px}.video-card{background:#404040;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.3)}.video-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.4)}.video-thumbnail{position:relative;width:100%;height:200px;overflow:hidden;background:#000}.thumbnail-video{width:100%;height:100%;object-fit:cover;display:block}.play-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease}.video-card:hover .play-overlay{opacity:1}.play-button{transform:scale(1);transition:transform .2s ease}.video-card:hover .play-button{transform:scale(1.1)}.video-info{padding:15px}.video-info h3{margin:0;font-size:1.2rem;font-weight:400;color:#fefefe}.video-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{position:relative;max-width:90vw;max-height:90vh;background:#2a2a2a;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.6)}.close-button{position:absolute;top:15px;right:15px;background:rgba(0,0,0,.7);border:none;color:white;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1001;transition:background .2s ease}.close-button:hover{background:rgba(0,0,0,.9)}.video-player{position:relative;width:100%;max-width:800px}.main-video{width:100%;height:auto;display:block;max-height:70vh}.video-details{padding:20px;text-align:center}.video-details h2{margin:0;font-size:1.5rem;font-weight:400;color:#fefefe}@media (max-width:768px){.video-page{padding:15px 15px 100px}.video-header h1{font-size:2rem}.video-grid{grid-template-columns:1fr;gap:15px;margin-bottom:120px}.video-thumbnail{height:180px}.modal-content{max-width:95vw;max-height:95vh}.video-details{padding:15px}.video-details h2{font-size:1.3rem}}@media (max-width:480px){.video-page{padding-bottom:120px}.video-header h1{font-size:1.8rem}.video-header p{font-size:1rem}.video-grid{margin-bottom:140px}.video-thumbnail{height:160px}.play-button svg{width:50px;height:50px}}