body {font-family: 'Roboto', sans-serif;background: #F5F6FA;color: #2A2E45;margin: 0;padding: 0;overflow-x: hidden;}

/* Header */
.navbar {background: rgba(255, 255, 255, 0.95);padding: 12px 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);position: fixed;top: 0;width: 100%;z-index: 1000;}
.navbar-brand {font-weight: 700;color: #2A2E45;font-size: 24px;}
.navbar-brand:hover {color: #FFD700;}
.navbar .search-container {flex-grow: 1;margin: 0 20px;}
.form-control {border-radius: 8px;border: 1px solid #E0E4E8;padding: 8px 15px;transition: border-color 0.3s ease;}
.form-control:focus {border-color: #FFD700;box-shadow: none;}
.btn-search {border-radius: 8px;background: #2A2E45;color: #fff;padding: 8px 15px;border: none;transition: background 0.3s ease;}
.btn-search:hover {background: #FFD700;color: #2A2E45;}
.navbar-icons a {color: #2A2E45;margin-left: 20px;font-size: 20px;transition: color 0.3s ease, transform 0.3s ease;}
.navbar-icons a:hover {color: #FFD700;transform: translateY(-2px);}

/* Sidebar */
.sidebar {height: 100%;background: rgba(255, 255, 255, 0.9);backdrop-filter: blur(10px);position: fixed;top: 70px;z-index: 999;overflow-y: auto;width: 0;left: 0;padding-top: 10px;transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);}
.sidebar.open {width: 240px;}
.sidebar a {padding: 12px 38px;text-decoration: none;font-size: 16px;color: #2A2E45;display: flex;align-items: center;transition: color 0.3s ease, padding-left 0.3s ease;}
.sidebar a:hover {color: #FFD700;padding-left: 25px;}
.sidebar a.active {color: #FFD700;}
.sidebar .close-btn {display: none;position: absolute;top: 15px;right: 20px;font-size: 24px;color: #2A2E45;cursor: pointer;transition: color 0.3s ease;}
.sidebar .close-btn:hover {color: #FFD700;}

/* Content */
.content {padding: 80px 20px 20px;transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.category-btn {background: #fff;border: 1px solid #2A2E45;padding: 8px 20px;margin: 5px;border-radius: 8px;color: #2A2E45;transition: all 0.3s ease;}
.category-btn:hover, .category-btn.active {background: #2A2E45;color: #FFD700;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);transform: translateY(-2px);}
.video-card {background: #fff;border-radius: 10px;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;animation: slideUp 0.6s ease-out forwards;}
.video-card:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}
.video-card img {width: 100%;height: 200px;object-fit: cover;}
.video-card .card-body {padding: 12px;}
.video-card h6 {font-size: 16px;font-weight: 500;margin: 5px 0;}
.video-card .card-body a {color: #2a2e45;text-decoration: none;}
.video-card p {font-size: 14px;color: #636E72;}

@keyframes slideUp {
      from {
            opacity: 0;
            transform: translateY(20px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

/* header */

/* Bottom Navigation */
.bottom-nav {display: none;position: fixed;bottom: 0;width: 100%;background: rgba(255, 255, 255, 0.95);box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);z-index: 1000;}
.bottom-nav a {flex: 1;text-align: center;padding: 10px 0;color: #2A2E45;text-decoration: none;font-size: 15px;transition: color 0.3s ease, transform 0.3s ease;}
.bottom-nav a.active {color: #FFD700;transform: scale(1.05);}
.bottom-nav a:hover {transform: scale(1.05);}
.bottom-nav i {display: block;font-size: 24px;margin-bottom: 2px;}
/* Bottom Navigation */

button.navbar-toggler.hamburger:focus {outline: none;box-shadow: none;}

/* Desktop Styles */
@media (min-width: 992px) {
      .sidebar {width: 240px;}
      .content {margin-left: 240px;padding: 80px 30px 30px;}
      .navbar .search-container {max-width: 600px;}
      .navbar-icons a {font-size: 20px;}
      .navbar .hamburger {display: none;}
      .video-card img {height: 220px;}
      .video-card h6 {font-size: 18px;}
      .video-card p {font-size: 14px;}
      .shorts-video video {width: 500px;height: 100%;}
}

/* Tablet Styles */
@media (max-width: 991px) and (min-width: 576px) {
      .sidebar {width: 0;}
      .content {margin-left: 0;padding: 70px 15px 70px;}
      .sidebar.open {width: 200px;}
      .content.shift {margin-left: 200px;}
      .navbar .search-container {max-width: 50%;}
      .video-card img {height: 180px;}
}

/* Mobile Styles */
@media (max-width: 767px) {
      .sidebar {width: 0;top: 60px;padding-top: 35px;}
      .content {margin-left: 0;padding: 90px 10px 70px;}
      .sidebar.open {width: 200px;z-index: 9999;margin-top: 0px;}
      .content.shift {margin-left: 200px;}
      .navbar {padding: 10px;}
      .navbar-brand {font-size: 20px;margin-right: 0px;}
      .navbar .search-container {max-width: 45%;margin: 0px 0px 0px 10px;}
      .navbar-icons a {margin-left: 0px;font-size: 18px;}
      .bottom-nav {display: flex;}
      .video-card img {height: 140px;}
      .video-card h6 {font-size: 14px;}
      .video-card p {font-size: 12px;}
      .sidebar .close-btn {display: block;top: 10px;right: 15px;}
      .navbar-icons a:nth-child(2n) {display: none;}
      .navbar .search-container .btn-search {background: transparent;color: #2A2E45;padding: 0px;}
      .navbar .search-container .form-control {padding: 4px 10px;font-size: 15px;}
      .navbar .search-container .form-control:focus {border-color: #2A2E45;}
      button.navbar-toggler.hamburger {color: #2A2E45;}
      .category-btn {padding: 5px 10px;margin: 0px;font-size: 14px;}
      .sidebar a {padding: 12px 23px;font-size: 15px;}
      .shorts_video_iner {height: 100%;}
      .shorts-video video {width: 100%;height: 100%;}
      .shorts_video_iner {padding: 0px 20px !important;overflow: hidden !important;margin: 90px 0px 0px !important;}
      .video_main_inner {height: calc(100vh - 185px) !important;}
      .shorts-video {height: calc(100vh - 185px) !important;}
      nav.navbar .navbar-icons {display: none !important;}
}

/* Desktop Styles */
@media (min-width: 992px) {
      .sidebar {width: 240px;}
      .content {margin-left: 240px;padding: 100px 30px 30px;}
      .navbar .search-container {max-width: 600px;}
      .navbar-icons a {font-size: 20px;}
      .navbar .hamburger {display: none;}
      .video-card img {height: 220px;}
      .video-card h6 {font-size: 18px;}
      .video-card p {font-size: 14px;}
}

/* Tablet Styles */
@media (max-width: 991px) and (min-width: 576px) {
      .sidebar {width: 0;}
      .content {margin-left: 0;padding: 70px 15px 70px;}
      .sidebar.open {width: 200px;}
      .content.shift {margin-left: 200px;}
      .navbar .search-container {max-width: 50%;}
      .video-card img {height: 180px;}
}

/* Mobile Styles */
@media (max-width: 575px) {
      .sidebar {width: 0;}
      .content {margin-left: 0;padding: 60px 10px 70px;}
      .sidebar.open {width: 200px;z-index: 9999;margin-top: 28px;}
      .content.shift {margin-left: 200px;}
      .navbar {padding: 10px 15px;}
      .navbar-brand {font-size: 20px;}
      .navbar .search-container {max-width:0%;}
      .navbar-icons a {margin-left: 10px;font-size: 18px;}
      .bottom-nav {display: flex;}
      .video-card img {height: 200px;}
      .video-card h6 {font-size: 14px;}
      .video-card p {font-size: 12px;}
      .sidebar .close-btn {display: block;}
}

@media (min-width: 768px) and (max-width: 991px) {
      .video_main_inner {margin-top: 45px;}
      .shorts-video video {width: 500px;height: 100%;}
}