/* Additional styling for media cards and sections */
   .media-section {
       margin-bottom: 50px;
   }

   .section-title {
       font-size: 28px;
       font-weight: bold;
       margin-bottom: 30px;
       padding-bottom: 15px;
       border-bottom: 3px solid #e6a756;
       display: inline-block;
       color: #2c3e50;
   }

   .media-card {
       background: #fff;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       margin-bottom: 30px;
       height: 100%;
       display: flex;
       flex-direction: column;
   }

   .media-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
   }

   .media-thumb {
       position: relative;
       background: #000;
       overflow: hidden;
       cursor: pointer;
   }

   .media-thumb img,
   .media-thumb video {
       width: 100%;
       height: 220px;
       object-fit: cover;
       transition: transform 0.4s;
   }

   .media-card:hover .media-thumb img,
   .media-card:hover .media-thumb video {
       transform: scale(1.05);
   }

   .play-icon {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 48px;
       color: white;
       background: rgba(0, 0, 0, 0.6);
       width: 70px;
       height: 70px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0.9;
       transition: all 0.3s;
       pointer-events: none;
   }

   .media-card:hover .play-icon {
       background: #e6a756;
       transform: translate(-50%, -50%) scale(1.1);
   }

   .media-info {
       padding: 15px;
       background: #f9f9f9;
       flex: 1;
   }

   .media-type-badge {
       display: inline-block;
       padding: 4px 12px;
       border-radius: 20px;
       font-size: 12px;
       font-weight: bold;
       margin-bottom: 10px;
       color: white;
   }

   .badge-image {
       background: #3498db;
   }

   .badge-video {
       background: #e67e22;
   }

   .badge-youtube {
       background: #e74c3c;
   }

   .upload-date {
       font-size: 12px;
       color: #7f8c8d;
       margin-top: 8px;
   }

   .youtube-embed {
       position: relative;
       padding-bottom: 56.25%;
       /* 16:9 */
       height: 0;
       overflow: hidden;
       background: #000;
   }

   .youtube-embed iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border: 0;
   }

   .modal-body .youtube-embed {
       margin-bottom: 0;
   }

   .loader-gallery {
       text-align: center;
       padding: 60px 0;
   }

   .error-message {
       background: #f8d7da;
       color: #721c24;
       padding: 15px;
       border-radius: 8px;
       text-align: center;
       margin: 20px 0;
   }

   .no-data {
       text-align: center;
       padding: 40px;
       background: #f1f1f1;
       border-radius: 12px;
       color: #555;
   }

   .filter-buttons {
       margin-bottom: 40px;
       text-align: center;
   }

   .filter-btn {
       background: transparent;
       border: 2px solid #e6a756;
       padding: 8px 24px;
       margin: 0 8px 12px;
       border-radius: 40px;
       font-weight: 600;
       color: #2c3e50;
       transition: all 0.3s;
       cursor: pointer;
   }

   .filter-btn.active,
   .filter-btn:hover {
       background: #e6a756;
       color: white;
       border-color: #e6a756;
   }

   .gallery .row>div {
       margin-bottom: 0;
   }

   @media (max-width: 768px) {

       .media-thumb img,
       .media-thumb video {
           height: 180px;
       }

       .section-title {
           font-size: 24px;
       }
   }