/*
  Cleaned and organized CSS

  This file is a refactored version of the original stylesheet.  Duplicated rules
  were consolidated, unused or commented‑out code blocks were removed, and
  formatting was standardized.  The layout and visual appearance remain the
  same, but the code is easier to read and maintain.  Logical sections and
  media queries are grouped together for clarity.
*/

/*
  -----------------------------------------------------------------------------
  CSS Variables & Reset

  Define global colour variables on the :root pseudo‑class so they can be reused
  throughout the stylesheet.  A universal box‑sizing rule is applied to make
  sizing more predictable.  Base body and anchor styles are defined here too.
*/

:root {
  --bg:    #000000;
  --ink:   #43442b;
  --footer:   #2a2a2a;
  --tile:  #1b1b1b;
  --stroke:#262626;
  --hover: #2e2e2e;
  --accent:#ffb300;
}


header,
nav,
.top,
.mobile-row {
  background: transparent;
}

/* Apply border‑box to all elements */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg);
  color: var(--ink);
}

/* Default link styling */
a {
  outline: none;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.3s ease;
}

/* Base container used for layouts */
.container {
  max-width: 1200px;
  padding: 12px;
  margin-top: -5px;
}

/*
  -----------------------------------------------------------------------------
  Header / Navigation

  The mobile row serves as the top navigation bar on mobile and small screens.
  It’s fixed relative to the document flow and uses a dark background.  A
  hamburger button can toggle the slide menu on mobile devices.  On larger
  screens the navigation can be handled by a different component (see #menu).
*/

.mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #111;
  padding: 10px;
  position: relative;
  z-index: 1001;
}

/* Hamburger toggle (mobile only) */
.menu-toggle {
  background: none;
  border: none;
  font-size: 20px;
  color: #FFFFFF;
  cursor: pointer;
  position: relative;
  top: -3px;
  left: -4px;
}

/* ✅ Fixed Slide-out menu on mobile */
.slide-menu {
  position: fixed;
  top: 0; /* ✅ Full screen top se start */
  left: -250px;
  width: 250px;
  height: 100vh;
  background-color: #111;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: left 0.3s ease;
  z-index: 1001; /* Increased above overlay */
  overflow-y: auto; /* optional if menu content is long */
}

/* ✅ Show menu */
.slide-menu.open {
  left: 0;
}

/* Menu link styles */
.slide-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  color: #f1f1f1;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid #333;
  transition: color 0.2s ease;
}

.slide-menu a i {
  font-size: 16px;
  color: #f1f1f1;
}

.slide-menu a:hover,
.slide-menu a.active {
  color: yellow;
}

/* ✅ Overlay to block background when menu is open */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none;
}

.menu-overlay.active {
  display: block;
}

/* ✅ Disable body scroll when menu is open */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Hide slide menu and hamburger on larger screens */
@media (min-width: 760px) {
  .slide-menu,
  .menu-toggle {
    display: none;
  }
}


/*
  -----------------------------------------------------------------------------
  Search

  Two search components are defined: a mobile overlay that appears on small
  screens, and a desktop search form.  The mobile version is hidden by default
  and toggled via JavaScript by adding the .active class.  On larger screens
  the overlay is disabled entirely.
*/

/* Mobile search overlay */
.mobile-search-overlay {
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  padding: 20px;
  display: none;
  flex-direction: column;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.mobile-search-overlay.active {
  display: flex;
}

.search-box-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 600px;
  margin-bottom: 20px;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 999px;
  padding: 8px 15px;
}

.search-form-icon {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.search-form-icon svg {
  width: 18px;
  height: 18px;
  fill: #FFFFFF;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.search-box input::placeholder {
  color: #FFFFFF;
}

.cancel-text-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* Hide mobile overlay on large screens */
@media (min-width: 760px) {
  .mobile-search-overlay {
    display: none !important;
  }
}

.search-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}


/* Desktop search container */
@media (min-width: 760px) {
  .search-container1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 300px;
    width: 100%;
    margin-left: auto;
  }

  .search-container1 form {
    display: flex;
    width: 100%;
    background-color: #2e2e2e;
    border-radius: 25px;
    overflow: hidden;
    height: 38px;
  }

  .search-container1 .search-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    outline: none;
  }

  .search-container1 .search-button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0 15px;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s ease;
  }

  .search-container1 .search-button:hover {
    color: #fff;
  }
  .search-button i {
  pointer-events: none;
}

}

::-webkit-input-placeholder {color: #ffffff;}



/* When the search bar is expanded on small screens */
@media (max-width: 760px) {
  .search-input {
    display: none;
    width: 0;
    opacity: 0;
  }
  .search-container1.active .search-input {
    display: block;
    width: 140px;
    opacity: 1;
  }
}





/*
  -----------------------------------------------------------------------------
  Video, Ads and Footer

  Standard container sizes and basic presentation for ad slots, video wrappers,
  and the page footer.  The footer uses theme variables for colour and stroke.
*/

.ad {
  max-width: 1200px;
  margin: 12px auto;
  padding: 6px;
  text-align: center;
  color: #ccc;
}

.video-wrap {
  max-width: 1200px;
  margin: 12px auto;
  padding: 12px;
}

.video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

.footer {
  border-top: 1px solid var(--stroke);
  background: var(--footer);
  color: #ffffff;
  margin-top: 30px;
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 14px;
}

.ad-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
  -----------------------------------------------------------------------------
  Sort Menu & Section Header

  Styles for the sorting links and section headings.  Responsive adjustments
  change the layout on narrow screens.
*/

.sort-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 10px 0;
}

.sort-menu a {

  background: #1e1e1e;
  color: #fff;
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sort-menu a:hover {
  background-color:  #ffcc00;
  color: #000;
}

.sort-menu a.active {
  background-color:  #ffcc00;
  color: #000;
  font-weight: bold;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}


@media (max-width: 600px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sort-menu {
    justify-content: flex-start;
    margin-top: 4px;
  }

  .sort-menu a {
    font-size: 13px;
    padding: 5px 10px;
  }
}





/*
  -----------------------------------------------------------------------------
  Category Grid

  A responsive grid for category tiles including thumbnail and overlay label.
*/
.cat-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Mobile: 1 box per row */
  gap: 12px;
}

@media (min-width: 600px) {
  .cat-grid {
    grid-template-columns: repeat(3, 1fr); /* Tablets: 3 boxes per row */
  }
}

@media (min-width: 1025px) {
  .cat-grid {
    grid-template-columns: repeat(4, 1fr); /* Laptops & Desktops: 4 boxes per row */
  }
}

.cat-grid .tile {
  position: relative;
  display: block;
  overflow: hidden;
}

.cat-grid .tile img {
  width: 100%;
  height: auto;
  display: block;
}

.cat-grid .tile .label {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-bottom-right-radius: 8px;
  z-index: 1;
}

/*
  -----------------------------------------------------------------------------
  Second (Bottom) Menu

  Additional navigation bar shown only on mobile screens.
*/

.second-menu {
  display: none;
}

@media (max-width: 760px) {
  .second-menu {
    display: flex;
    justify-content: center;
    gap: 10px;
    background-color: #333;
    padding: 4px 0;
    z-index: 1000;
  }

  .second-menu a {
    flex: 1;
    text-align: center;
    color: #f2f2f2;
    font-weight: 600;
    font-size: 13px;
    padding: 3px 0;
    outline: none;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .second-menu a:hover,
  .second-menu a:focus,
  .second-menu a.active {
    color: #ae9b44;
  }
}

/* Default icon visibility for second menu */
.second-menu i {
  display: inline-block;
  margin-right: 6px;
  color: #f1f1f1;
}

@media (max-width: 760px) {
  .second-menu i {
    display: none;
  }
}

/*
  -----------------------------------------------------------------------------
  Desktop Navigation (#menu)

  When the screen is wider than mobile sizes, a horizontal navigation bar is
  displayed.  On mobile it is hidden in favour of the slide menu.
*/

@media (min-width: 760px) {
  .container1 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
  }

  #menu {
    position: static;
    background-color: #1e1e1e;
    width: 100%;
    padding: 8px 0;
    z-index: 1000;

  }
  #menu a {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  #menu a i {
    margin-right: 6px;
    font-size: 14px;
  }

  #menu  i {
    color:#FFFFFF;
  }

  #menu a:hover,
  #menu a:focus {
    background-color: #2a2a2a;
    color: #f1c40f;
  }

  #menu a.active {
    background-color:#2a2a2a;
    color: #FFC107;
    font-weight: 600;
  }
}

@media (max-width: 760px) {
  #menu {
    display: none;
  }

  /* show the hamburger button on mobile */
  #btn-menu {
    display: block;
  }
}

/*
  -----------------------------------------------------------------------------
  Logo

  The logo is split into two spans so the accent colour can be applied to part
  of the text.  Adjust the font size to scale the logo.

body {
  
  font-family: 'Arial', sans-serif;
}

.logo {
  font-weight: 600;
  font-size: 34px;
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  gap: 0px; 
}

.logo .b1 {
  color: #fff;
  margin-right: 0px
}

.logo .b2 {
  background: linear-gradient(135deg, #ff9900);
  color: #111;
  padding: 0px 4px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: -7px; 
}*/

:root {
  --accent: #ffb300;    
  --accent-dark: #b37c00;
  --white: #ffffff;
  --size: 42px;
}

.porehole-logo {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: var(--size);
  display: inline-flex;
  align-items: center;
  gap: 0;
  letter-spacing: 0.4px;
  user-select: none;
  margin-top: 0px;    
  margin-bottom: 0px; 
}

.porehole-logo .p {
  color: var(--white);
  margin-right: 0.02em;
}

.porehole-logo .ring {
  position: relative;
  width: calc(var(--size) * 1.1);
  height: calc(var(--size) * 1.1);
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.02em;
  box-sizing: border-box;
}


.porehole-logo .ring-top,
.porehole-logo .ring-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: calc(var(--size) * 0.1) solid var(--accent);
  box-sizing: border-box;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.porehole-logo .ring-bottom {
  border-color: var(--accent-dark);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}


.porehole-logo .re {
  color: var(--white);
  margin-left: 0.02em;
}

.porehole-logo .hole {
  color: var(--accent);
  margin-left: 0.06em;
}

.porehole-logo:hover .ring-top,
.porehole-logo:hover .ring-bottom,
.porehole-logo:hover .hole {
  filter: brightness(1.25);
  transition: 0.25s ease;
}

@media (max-width: 600px) {
  :root {
    --size: 30px;  
  }
    .porehole-logo {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

/*
  -----------------------------------------------------------------------------
  Video Card / Grid

  Cards for displaying video previews in a responsive grid.  Includes thumbnail
  styling, hover interactions and badge placement.
*/
.video-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Mobile: 1 box per row */
  gap: 12px;
}

/* 🧩 fix 3-dot popup size only on iPad / tablet range */
@media (min-width: 760px) and (max-width: 1020px) {
  .share-popup {
    transform: scale(0.70);   /* slightly shrink the popup */
    transform-origin: top right;
  }

  .share-popup button,
  .share-popup i {
    font-size: 14px !important;  /* match desktop size */
  }

  .more-btn i {
    font-size: 16px !important;  /* keep same size as desktop */
  }
}



@media (min-width: 600px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr); /* Tablets: 3 boxes per row */
  }
}

@media (min-width: 1025px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr); /* Laptops & Desktops: 4 boxes per row */
  }
}

/* make all 3-dot buttons identical */
.more-btn {
  font-size: 16px;        /* ya jo size video.php me use hua tha */
  color: #fff;            /* ya same color */
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  line-height: 1;         /* uniform height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* optional: hover look same */
.more-btn:hover {
  opacity: 0.8;
}

 
.search-results .more-btn i,
.video-card .more-btn i {
  font-size: 16px;
  vertical-align: middle;
}



.video-card, .tile { position: relative !important; }
.video-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.video-card:hover {
  transform: scale(1.01);
}

.video-card .thumb {
  position: relative;
  overflow: hidden;
}

.video-card img {
  width: 100%;
  display: block;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -1px;
  padding: 4px 0;
}

.video-meta .video-title {
  flex: 1;
  color: #E5E5E5;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.video-meta .video-menu {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.video-meta .video-menu:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}


.thumb .badge-row {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.rating-badge,
.duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #000000AA;
  color: #fff;
  font-size: 11px;
  padding: 3px 6px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  min-width: 45px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.rating-badge {
  color: #00ff00;
}

.share-popup {
  position: absolute;
  top: 38px;
  right: 10px;
  width: 240px;
  background: #fff;
  color: #000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  padding: 12px;
  z-index: 100;
  display: none;
}

.share-options span {
  font-weight: bold;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

.social-icons {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.social-icons a img {
  width: 28px;
  height: 28px;
  transition: transform 0.2s;
}

.social-icons a img:hover {
  transform: scale(1.1);
}

.copy-link-section {
  display: flex;
  gap: 5px;
  align-items: center;
}

.copy-link-section input {
  flex: 1;
  padding: 5px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.copy-link-section button {
  background: #eee;
  border: none;
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.copy-link-section button:hover {
  background: #ddd;
}


.social-icons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.social-icons a {
  text-align: center;
  font-size: 11px; 
  color: #333;
  text-decoration: none;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.social-icons a i {
  font-size: 22px;
  margin-bottom: 4px;
  display: block;
  transition: transform 0.2s;
}

.social-icons a span {
  font-size: 10px; 
  margin-top: 2px;
  display: block;
  color: #444;
}

.social-icons a:hover i {
  transform: scale(1.2);
}

@media all and (min-width: 1280px) {
    .description {-webkit-box-orient: inherit; font-size: 13px; left: 24%; right: 30%;}
    h1,h2 {font-size: 20px;}
    .categories ul li a {font-size: 15px;}
    .categories ul li a {width: 75%;}
    .categories ul li span {width: 25%;}
    .container {max-width: 1330px;}
    .content li, .tcats li {width: 25%;}
    .search {right: 10px; margin-right: 0;}
}


.pagination-box {
  text-align: center;
  margin: 16px 0;
  color: white;
  font-size: 16px;
}

.pagination-box a {
  color: white;
  text-decoration: none;
  margin: 0 5px;
  font-weight: bold;
}

.pagination-box a:hover {
  color: #00ffff;
  text-decoration: underline;
}
/* Updated section title */
.section-title {
  font-size: 21px;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  margin: 14px 0;
  padding-left: 10px;
  border-left: 4px solid var(--accent);
  letter-spacing: 0.4px;
}







.copy-link-section {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}



.copy-btn {
  background: #ffcc00;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.copy-btn:hover {
  background: #e6b800;
}

/* ✅ Toast message style */
.toast-msg {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #222;
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  font-size: 14px;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}




/* ---------------------------
  Compact header overrides
  Paste at end of your main CSS
   --------------------------- */

/* use a header height var so slide-menu can follow it */
:root {
  --header-height: 44px; /* change to 40px or 48px depending on how compact you want */
}

/* make header itself tighter */
header.top {
  padding-top: 4px;    /* upar ka fasla */
  padding-bottom: 4px; /* niche ka fasla */
}

/* mobile-row = the bar that contains hamburger + logo + search */
.mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;            /* adjustable: reduce to 6 if you want even tighter */
  padding: 6px 10px;    /* left/right thoda rakha, top/bottom controlled above */
  min-height: var(--header-height);
  line-height: 1;
  background-color: #111; /* keep same as before */
}

/* hamburger button vertical alignment */
.menu-toggle {
  top: 0;               /* remove negative shift that added extra visual space */
  margin: 0;
  padding: 0;
}

/* reduce search form height (desktop version) */
@media (min-width: 830px) {
  .search-container1 .search-input,
  .search-container1 form {
    height: 34px;      /* previous was 38px — smaller makes header tighter */
  }
}

/* logo: remove extra margins and tighten baseline */
.porehole-logo {
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  padding: 0;
}

/* slight vertical nudge to perfectly center the ring */
.porehole-logo .ring {
  transform: translateY(0.5px); /* use 0 or -0.5px if it looks lower; tweak visually */
}

/* ensure slide menu sits directly under the compact header */
.slide-menu {
  top: var(--header-height); /* was hard-coded 50px before */
}

/* second menu (bottom row) — reduce its vertical padding so it doesn't add big gap */
.second-menu {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* remove accidental margins from nav / container items that might add vertical space */
.mobile-row > * { margin: 0; }

/* If you want an even more compact/aggressive header, use these values */
.header-aggressive header.top { padding: 2px 0; }
.header-aggressive .mobile-row { min-height: 36px; gap: 6px; padding: 4px 8px; }
.header-aggressive .search-container1 form { height: 30px; }

/* Mobile specific: make header even tighter on small screens */
@media (max-width: 600px) {
  :root { --header-height: 40px; } /* smaller header on phones */
  header.top { padding-top: 3px; padding-bottom: 3px; }
  .mobile-row { gap: 8px; padding: 5px 8px; min-height: var(--header-height); }
  .porehole-logo { font-size: 31px; } /* you already had 31px; keeps it compact */
  .porehole-logo .ring { transform: translateY(0px); }
}
/* Ensure mobile hamburger icon has same side padding as rest of row */
.mobile-row {
  padding-left: 12px;
  padding-right: 12px; /* already tha to isko same rakhna */
}

/* If icon itself shifted ho raha ho to reset its margin */
.menu-toggle {
  margin-left: 0;   /* agar negative ya zero ki wajah se side pe chipak gaya ho */
  padding-left: 2px; /* thoda andar push karne ke liye (adjust: 2px → 6px as per need) */
}


.trending-box {
  background: #1b1b1b;
  padding: 15px;
  border-radius: 10px;
  margin: 30px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.trending-box h3 {
  color: #ffcc00;
  font-size: 18px;
  margin-bottom: 12px;
}
.trending-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trending-list a {
  background: #2a2a2a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s ease;
}
.trending-list a:hover {
  background: #ffcc00;
  color: #000;
}


.mobile-row {
    background: transparent !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}