/* FONT */
@font-face { font-family: 'SF Pro Rounded'; src: url('../fonts/SF-Pro-Rounded-Regular.otf') format('opentype'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'SF Pro Rounded'; src: url('../fonts/SF-Pro-Rounded-Medium.otf') format('opentype'); font-weight: 500; font-style: normal;}
@font-face { font-family: 'SF Pro Rounded'; src: url('../fonts/SF-Pro-Rounded-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal;}
@font-face { font-family: 'SF Pro Rounded'; src: url('../fonts/SF-Pro-Rounded-Bold.otf') format('opentype'); font-weight: 700; font-style: normal;}

* {
  max-width: 100%;
}


html, body {
  overflow-x: hidden;
}

body {
  margin:0;
  font-family:Arial, sans-serif;
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* SIDEBAR */
.video-sidebar {
  width:20%;
  background:#ecf1ef;
  color:#00332e;
  padding:25px;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  overflow-y:auto;
  box-shadow:2px 0 10px rgba(0,0,0,0.2);
  font-family:'SF Pro Rounded', sans-serif;
}
.video-sidebar h2 { margin-top:0; font-size:22px; letter-spacing:0.5px; }

/* FILTER */
.video-filter-section h3 { font-size:15px; font-weight:600; margin-bottom:10px; color:#004d40; }
.video-filter-item { padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.1); }
.video-filter-item label { cursor:pointer; color:#00332e; font-weight:500; }
.video-reset-btn { margin-top:25px; padding:10px 15px; width:100%; border:none; background:#004d40; color:#fff; cursor:pointer; border-radius:4px; font-size:15px; }

/* NAVBAR */
.video-sidebar-header { text-align:center; }
.video-sidebar img { height:50px; display:block; margin:0 auto 15px auto; }
.video-nav-menu { display:flex; justify-content:center; gap:18px; margin-top:10px; }
.video-nav-menu a { color:#004d40; text-decoration:none; font-weight:600; font-size:15px; transition:0.3s; margin-bottom:27px;}
.video-nav-menu a:hover { color:#00201c; transform:scale(1.05);}
.video-nav-menu a.active { color:#001a17; position:relative; font-weight:700;}
.video-nav-menu a.active::after { content:""; position:absolute; left:0; right:0; bottom:-4px; margin:auto; width:100%; height:3px; background:#004d40; border-radius:2px; }

/* GALLERY */
.video-gallery-wrapper {
  margin-left:26%;
  width:77%;
  height:100vh;
  overflow-y:auto;
  padding:40px 20px 20px 20px;
  font-family:'SF Pro Rounded', sans-serif;
}
.video-gallery-title { font-family:'SF Pro Rounded, sans-serif'; font-size:32px; margin-bottom:25px; margin-top:30px; color:#004d40; font-weight:600; position:relative; }
.video-gallery-title::after { content:""; display:block; width:70px; height:4px; background:#004d40; margin-top:6px; border-radius:4px; }

/* GRID VIDEO */
.video-gallery { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.video-thumb-wrapper { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 4px; cursor: pointer; }
.video-thumb-wrapper .video-thumb { position: absolute; top: 0; left:0; width:100%; height:100%; object-fit: cover; display:block; transition: transform 0.3s; }
.video-thumb-wrapper .video-thumb:hover { transform: scale(1.05); }
.video-thumb-wrapper .play-icon { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:50px; color:rgba(255,255,255,0.9); pointer-events:none; text-shadow:0 0 10px rgba(0,0,0,0.7); }

/* MODAL */
.video-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; padding:20px;}
.video-modal-content { position:relative; width:70%; height:95vh; background:#ecf1ef; padding:20px; border-radius:6px; overflow-y:auto; display:flex; flex-direction:column; justify-content:flex-start; }
.video-modal-content iframe { width:100%; height:100%; border-radius:0; }
.video-close-btn { position:absolute; top:10px; right:15px; color:#fff; font-size:30px; cursor:pointer; }
.video-description { color:#00332e; margin-bottom:15px; font-size:15px; line-height:1.6; text-align:left; white-space: pre-wrap; }

/* HAMBURGER */
.hamburger { display:none; position: fixed; top: 15px; left: 15px; font-size:28px; background:none; border:none; cursor:pointer; z-index:1001; }
.sidebar-close { display:none; position:absolute; top:10px; right:15px; font-size:28px; cursor:pointer; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .video-sidebar { width:25%; padding:20px;}
  .video-gallery-wrapper { margin-left:27%; width:72%; padding:30px 15px 85px 100px;}
  .video-gallery { grid-template-columns:repeat(3,1fr); gap:12px; }
}

@media (max-width:768px) {
  .hamburger { display:block;}
  .video-sidebar { position:fixed; top:0; left:-100%; width:75%; height:100%; background:#ecf1ef; z-index:1000; transition:left 0.3s ease; box-shadow:2px 0 10px rgba(0,0,0,0.3); overflow-y:auto; }
  .video-sidebar.show { left:0;}
  .sidebar-close { display:block;}
  .video-gallery-title {margin-top: 60px;}
  .video-gallery-wrapper { margin-left:0; width:100%; padding:20px 10px;}
  .video-gallery { grid-template-columns:repeat(2,1fr); gap:10px; }
  .video-nav-menu { flex-wrap:wrap; gap:12px; justify-content:center; }
  .video-nav-menu a { margin-bottom:10px; }
  .video-thumb-wrapper .video-thumb { width: 97%;}
}

@media (max-width:480px) {
  body { flex-direction:column; height:auto;}
  .video-gallery-wrapper { margin-left:0; width:100%; padding:15px 5px;}
  .video-gallery { grid-template-columns:1fr; gap:10px; }
  .video-gallery-title { font-size:24px;}
  .video-thumb-wrapper .play-icon { font-size:40px;}
  .video-modal {
    padding: 1px;
    margin-top:40px;
  }
  .video-modal-content {
    width: 90%;
    max-width: 100%;
    height: 90vh;
    padding: 10px;
  }
  .video-description { font-size:14px;}
}

@media (max-width:768px) and (orientation: landscape) {
  .video-modal-content { width:90%; height:95vh; padding:15px;}
}