.videos-main{padding:var(--spacing-4) var(--spacing-3);max-width:1200px;margin:0 auto;width:100%}.videos-header{text-align:center;margin-bottom:var(--spacing-5);animation:slideUp .6s ease forwards}.videos-header h1{margin-bottom:var(--spacing-2);font-size:3rem}.videos-description{color:var(--text-secondary);max-width:600px;margin:0 auto;background:#2d2d2dbf;padding:var(--spacing-2);border-radius:var(--radius-lg);font-size:1.125rem}.videos-container{animation:slideUp .6s .2s ease forwards}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--spacing-4);margin-bottom:var(--spacing-5)}.video-item{background-color:#1e1e1ed9;border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;transition:all var(--transition-normal)}.video-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}.video-item.featured{grid-column:span 2}.video-wrapper{position:relative;aspect-ratio:16/9;overflow:hidden}.video-wrapper a{display:block;width:100%;height:100%;position:relative}.video-wrapper img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform var(--transition-normal)}.video-wrapper:hover img{transform:scale(1.05)}.play-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#0000004d;opacity:0;transition:opacity var(--transition-normal)}.video-wrapper:hover .play-overlay{opacity:1}.play-button{width:80px;height:80px;background-color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;transition:all var(--transition-fast)}.play-button:hover{background-color:var(--primary-dark);transform:scale(1.1)}.video-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--surface-light),var(--surface));display:flex;align-items:center;justify-content:center}.placeholder-content{text-align:center;color:var(--text-secondary)}.placeholder-icon{font-size:3rem;margin-bottom:var(--spacing-2)}.placeholder-content h4{margin-bottom:var(--spacing-1);color:var(--text-primary);font-size:1.25rem}.placeholder-content p{margin:0;font-style:italic}.video-info{padding:var(--spacing-3)}.video-info h3{margin-bottom:var(--spacing-2);color:var(--primary-light);font-size:1.25rem}.video-info p{color:var(--text-secondary);margin-bottom:var(--spacing-2);line-height:1.6}.video-meta{display:flex;gap:var(--spacing-2);flex-wrap:wrap}.video-duration,.video-category{background-color:var(--surface-light);color:var(--text-secondary);padding:4px var(--spacing-1);border-radius:var(--radius-sm);font-size:.875rem}.video-category{background-color:var(--primary);color:#fff}.videos-cta{text-align:center;background-color:#1e1e1ed9;border-radius:var(--radius-lg);border:1px solid var(--border);padding:var(--spacing-5);animation:slideUp .6s .4s ease forwards}.videos-cta h2{margin-bottom:var(--spacing-2);color:var(--primary)}.videos-cta p{color:var(--text-secondary);margin-bottom:var(--spacing-3);max-width:500px;margin-left:auto;margin-right:auto}.hero-cta-secondary{display:flex;justify-content:center;margin-top:var(--spacing-3)}.videos-link{background-color:transparent;color:var(--primary);border:2px solid var(--primary);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);text-decoration:none;font-weight:500;transition:all var(--transition-fast)}.videos-link:hover{background-color:var(--primary);color:#fff;text-decoration:none;transform:translateY(-2px)}.header-content{display:flex;align-items:center;gap:var(--spacing-3);width:100%}.back-home-button{background-color:var(--primary);color:#fff;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-md);text-decoration:none;font-weight:500;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-1);white-space:nowrap}.back-home-button:hover{background-color:var(--primary-dark);text-decoration:none;transform:translateY(-1px)}@media (max-width: 768px){.videos-main{padding:var(--spacing-3) var(--spacing-2)}.videos-header h1{font-size:2.5rem}.video-grid{grid-template-columns:1fr;gap:var(--spacing-3)}.video-item.featured{grid-column:span 1}.video-grid{grid-template-columns:1fr}.video-info{padding:var(--spacing-2)}.videos-cta{padding:var(--spacing-3)}.play-button{width:60px;height:60px;font-size:1.5rem}.header-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-2)}.back-home-button{align-self:flex-start}}
