.elementor-2914 .elementor-element.elementor-element-3c66885{--display:flex;--margin-top:0px;--margin-bottom:300px;--margin-left:0px;--margin-right:0px;--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-2914 .elementor-element.elementor-element-67ff7de > .elementor-widget-container{margin:10px 0px 40px 0px;}.elementor-2914 .elementor-element.elementor-element-67ff7de{text-align:center;}.elementor-2914 .elementor-element.elementor-element-67ff7de .elementor-heading-title{font-family:"Vujahday Script", Sans-serif;font-size:3em;font-weight:600;font-style:normal;}.elementor-2914 .elementor-element.elementor-element-623ad37{text-align:start;}.elementor-2914 .elementor-element.elementor-element-f5753c0 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 40px;}.elementor-2914 .elementor-element.elementor-element-f5753c0{text-align:start;}.elementor-2914 .elementor-element.elementor-element-f5753c0 p{margin-block-end:0px;}.elementor-2914 .elementor-element.elementor-element-31e4f37{text-align:start;}.elementor-2914 .elementor-element.elementor-element-4dc177e{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:40px;}.elementor-2914 .elementor-element.elementor-element-4dc177e:not(.elementor-motion-effects-element-type-background), .elementor-2914 .elementor-element.elementor-element-4dc177e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:767px){.elementor-2914 .elementor-element.elementor-element-67ff7de .elementor-heading-title{font-size:2em;}.elementor-2914 .elementor-element.elementor-element-4dc177e{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}}/* Start custom CSS for html, class: .elementor-element-c2fc2fb */* { box-sizing: border-box; margin: 0; padding: 0; }
  
    .main-container {
      max-width: 1600px; 
      margin: 0 auto; 
      padding: 20px;
    }
   

    .two-column-layout {
      display: flex; 
      flex-direction: column; gap: 1.5rem;
    }

    .playlist-column {
      flex: 0 0 30%;
      background: white; 
      border-radius: 10px; 
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
      padding: 1rem; 
      overflow-y: auto; scrollbar-width: thin;
    }
    .playlist-column::-webkit-scrollbar { width: 8px; }
    .playlist-column::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }

    .player-column {
      flex: 0 0 70%;
      border-radius: 0px; 
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      overflow: hidden; 
      display: flex; 
      flex-direction: column;
    }

    .video-container {
      position: relative; 
      padding-bottom: 56.25%; 
      height: 0; 
      
    }
    .video-container iframe {
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%;
    }

    /* Horizontal scrolling thumbnails */
    .playlist-thumbs {
      padding: 16px; 
      background: #f8f9fa; 
      border-top: 1px solid #eee;
      
      display: none; /* shown when playlist selected */
    }
    .playlist-thumbs h3 {
      margin: 0 0 12px; font-size: 1.1rem; color: #333;
    }
    .thumbs-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 14px;
      padding-bottom: 8px;           /* space for scrollbar */
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch; /* smooth on iOS */
    }
    .thumbs-grid::-webkit-scrollbar {
      height: 8px;
    }
    .thumbs-grid::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 4px;
    }
    .thumb-card {
      flex: 0 0 200px;               /* fixed width – adjust as needed */
      cursor: pointer;
      border-radius: 8px;
      overflow: hidden;
      background: white;
      border: 1px solid #ddd;
      transition: all 0.15s;
    }
    .thumb-card:hover {
      transform: scale(1.04);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .thumb-card img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
    }
    .thumb-card p {
      padding: 8px 10px;
      font-size: 0.9rem;
      line-height: 1.3;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .thumb-card.active {
      border-color: #0066cc;
      box-shadow: 0 0 0 2px rgba(0,102,204,0.2);
    }

    /* Modal - mobile only */
    #videoModal {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92);
      z-index: 2000; align-items: center; justify-content: center; padding: 12px;
    }
    .modal-content { position: relative; width: 100%; max-width: 960px; background: #000; border-radius: 12px; overflow: hidden; }
    .close-button {
      position: absolute; top: 12px; right: 16px; font-size: 2.2rem; color: white;
      cursor: pointer; z-index: 10; text-shadow: 0 0 6px rgba(0,0,0,0.8);
    }

    /* Playlist section styling (left sidebar) */
    .playlist-section { margin-bottom: 1.5rem; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee; }
    .playlist-header {
      padding: 16px 20px; background: #f1f3f5; cursor: pointer; user-select: none;
      display: flex; justify-content: space-between; align-items: center; font-weight: 600;
    }
    .playlist-header:hover { background: #e9ecef; }
    .chevron { transition: transform 0.25s; font-size: 1.1rem; }
    .video-grid {
      display: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px; padding: 20px;
    }
    .video-card {
      cursor: pointer; border-radius: 8px; overflow: hidden; background: #fff;
      transition: all 0.18s; border: 1px solid #eee;
    }
    .video-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); border-color: #ddd; }
    .video-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
    .video-card p { padding: 10px 12px; font-size: 0.94rem; line-height: 1.4; }
    .video-card.active { border: 2px solid #0066cc; box-shadow: 0 0 0 3px rgba(0,102,204,0.15); }

    @media (max-width: 900px) {
      .two-column-layout { flex-direction: column; }
      .playlist-column, .player-column { flex: none; width: 100%; }
      .player-column { display: none; }
      .playlist-column { max-height: none; overflow-y: visible; padding: 0.8rem; }
      .video-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
      .playlist-thumbs { display: none !important; }
    }

    @media (min-width: 901px) {
      .two-column-layout { flex-direction: row; align-items: stretch; }
      .playlist-column { max-height: calc(100vh - 330px); }
      #videoModal { display: none !important; }
    }/* End custom CSS */