html,body{
    margin:0;
    padding:0;
}
body:not(.tv-details) {
    background: linear-gradient(180deg, #27272A 0%, #09090B) 100%, #09090B;
  }
  
  section {
    position: relative;
    padding: 24px 24px 120px 24px;
    width: 100%;
  }
  
  a {
    text-decoration: none;
  }
  
  header {
      z-index:2;
    position: sticky;
    top: 24px;
    left: 0;
    display: flex;
    padding: 0.75rem;
    align-items: center;
    gap: 3rem;
    border-radius: 1.25rem;
    background: #18181B;
    /* Main Shadow */
    box-shadow: -4px 8px 48px 0px rgba(0, 0, 0, 0.8);
  }
  
  body.tv-details {
    background-color: #09090B;
  }
  
  body.tv-details .header {
    position: sticky;
    top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
     width: 100%;
    z-index: 99;
  }
  
  body.tv-details .header div {
    display: flex;
    padding: 0.75rem;
    align-items: center;
    gap: 3rem;
    border-radius: 1.25rem;
    background: #18181B;
    /* Main Shadow */
    box-shadow: -4px 8px 48px 0px rgba(0, 0, 0, 0.8);
    width: 100%;
  }
  
  header img,
  .header img {
    /*width: 3.0625rem;*/
    height: 2.50569rem;
  }
  
  nav {
    display: flex;
    flex: 1;
  }
  
  nav ul {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 0 0;
  }
  
  nav ul li a {
    color: #A1A1AA;
    /* Label M/Medium */
    font-family: "Tajawal", serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem; /* 150% */
    transition: color 0.5s ease;
  }
  
  nav ul li {
    cursor: pointer;
    display: flex;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
  }
  
  nav ul li:hover a {
    color: var(--color-white);
  }
  
  nav ul li.active a {
    color: var(--color-white);
  }
  
  button {
    cursor: pointer;
    border: none;
    outline: none;
    display: flex;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid #27272A;
    background: #27272A;
    color: #D4D4D8;
    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem; /* 142.857% */
    transition: background-color 0.5s ease, color 0.5s ease;
  }
  
  button:hover {
    background-color: #52525B;
    color: var(--color-white);
  }
  
  button svg path {
    transition: stroke 0.5s ease;
  }
  
  button:hover svg path {
    stroke: var(--color-white);
  }
  
  .bg-style-hero-1 {
    background-image: url("/assets/images/Header.png");
  }
  
  .bg-style-hero-2 {
    background-image: url("/assets/images/Header3.jpg");
  }
  
  .style-hero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    margin: 2.25rem 0 3.5rem 0;
    height: 34.625rem;
    flex-shrink: 0;
    border-radius: 1rem;
    background-color: #18181B;
    /* Main 2 Shadow */
    box-shadow: -4px 8px 48px 4px rgba(0, 0, 0, 0.6);
    overflow: hidden;
  }
  
  .style-hero h1 {
    padding: 3rem;
    color: #FAFAFA;
    text-align: right;
    font-family: "Almarai", serif;
    font-size: 3.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4.5rem; /* 120% */
    letter-spacing: -0.0375rem;
    background: linear-gradient(180deg, transparent, #18181B 90%);
  }
  
  .card {
    cursor: pointer;
    position: relative;
    display: flex;
    flex: 1;
    height: 15rem;
    padding: 1.5rem;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    border-radius: 1rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #18181B;
    /* Main 2 Shadow */
    box-shadow: -4px 8px 48px 4px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transition: box-shadow 0.5s ease;
  }
  
  .card-style-4 h2 {
    background: linear-gradient(-90deg, #86EFAC 0%, #10B981 51%, #0891B2) 100%;
  }
  
  .card-style-3 h2 {
    background: linear-gradient(90deg, #991B1B 61.16%, #FB923C 83.97%, #FCD34D 107.7%);
  }
  
  .card-style-2 h2 {
    background: linear-gradient(90deg, #4338CA 62.89%, #6366F1 81.08%, #A5B4FC 100%);
  }
  
  .card-style-1 h2 {
    background: linear-gradient(90deg, #1D4ED8 13.21%, #3B82F6 55.74%, #93C5FD 100%);
  }
  
  .card-style-4 {
    background-image: url("/assets/images/SocialmediaArabic.jpg");
  }
  
  .card-style-3 {
    background-image: url("/assets/images/NewspaperArabic.jpg");
  }
  
  .card-style-2 {
    background-image: url("/assets/images/RadiosArabic.jpg");
  }
  
  .card-style-1 {
    background-image: url("/assets/images/TvChannelsArabic.jpg");
  }
  
  .card-style-4:hover img {
    left: -15px;
  }
  
  .card-style-3:hover img,
  .card-style-2:hover img,
  .card-style-1:hover img {
    top: 20px;
  }
  
  .card h2 {
    flex: 1;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Heading/H1 */
    font-family: var(--font-Almarai);
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.25rem; /* 120% */
    z-index: 1;
  }
  
  .card img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
/*    mask-image: linear-gradient(138deg, rgb(0, 0, 0) 30%, transparent 70%);
*/    transition: left 0.5s ease, top 0.5s ease;
  }
  
  .h2 {
    color: var(--color-white);
    text-align: right;
    font-family: "Almarai", serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2rem; /* 133.333% */
  }
  
  /* END - Home */
  /* START - tv-channels */
  .tv-channels .style-hero {
    height: 25.4375rem;
    background-repeat: no-repeat;
    background-position: center;
  }
  .tv-channels .style-hero div h1 {
    background: transparent;
    padding: 0;
  }
  .tv-channels .style-hero div h2 {
    color: #FAFAFA;
    text-align: right;
    font-family: var(--font-Almarai);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7rem; /* 170% */
  }
  .tv-channels .style-hero div {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 3rem;
    background: linear-gradient(180deg, transparent, #18181B 90%);
    flex: 1;
  }
  .tv-channels button {
    width: fit-content;
  }
  
  .search-container {
    display: flex;
    cursor: text;
    width: 20.125rem;
    padding: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(9, 9, 11, 0);
    background: #27272A;
  }
  
  .search-container input::placeholder {
    color: #A1A1AA;
  }
  
  .search-container:focus-within svg path {
    stroke: var(--color-white);
  }
  
  .search-container input {
    border: none;
    outline: none;
    flex: 1;
    background: transparent;
    color: var(--color-white);
    /* Label/Medium */
    font-family: "Tajawal", serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem; /* 150% */
  }
  
  .channels {
    display: flex;
    gap: 16px;
  }
  
  .channel {
    max-width: 232px;
    cursor: pointer;
    display: flex;
    flex: 1;
    height: 14.5rem;
    padding: 0.375rem;
    flex-direction: column;
    flex-shrink: 0;
    border-radius: 1.375rem;
    transition: background-color 0.8s ease;
  }
  
  .channel:hover .style-hero div {
    background: red;
  }
  
  .channel:hover {
    background-color: #27272A;
  }
  
  .channel:hover span {
    filter: grayscale(0%);
  }
  
  .channel span svg {
    transition: transform 0.8s ease;
  }
  
  .channel:hover span svg {
    transform: scale(1.3);
  }
  
/*  .channels li:nth-child(1) span {
    background: url("/assets/images/bg-Aljazeera.jpg") center/cover no-repeat;
  }
  
  .channels li:nth-child(2) span {
    background: url("/assets/images/bg-CNN.jpg") center/cover no-repeat;
  }

  .channels li:nth-child(3) span {
    background: url("/assets/images/bg-BBC.jpg") center/cover no-repeat;
  }
  */
  
  .channel span {
    filter: grayscale(100%);
    height: 10rem;
    flex-shrink: 0;
    border-radius: 1rem;
    border: 1px solid #27272A;
    /* Main 2 Shadow */
    box-shadow: -4px 8px 48px 4px rgba(0, 0, 0, 0.6);
    transition: filter 0.8s ease;
  }
  
  .channel h2 {
    padding: 1rem;
    color: var(--color-white);
    /* Display/H6 */
    font-family: "Tajawal", serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem; /* 140% */
  }
  
  /* END - tv-channels */
  html {
    width: 100%;
  }
  
  body.tv-details .bg-hero {
    height: 803px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background-image: url("/assets/images/Backgroundblur1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  body.tv-details .bg-hero .inner-bg-hero {
    width: 100%;
    padding: 48px 24px;
  }
  
  body.tv-details .back {
    margin: 0 0 0 0;
  }
  
  body.tv-details .div-hero {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .div-hero {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
  }
  
  .div-hero h2 {
    color: var(--color-zinc-50, #FAFAFA);
    text-align: right;
    font-family: Almarai;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 72px; /* 120% */
    letter-spacing: -0.6px;
  }
  
  .div-hero p {
    width: 590px;
    color: var(--Common-Neutral-Default, #FAFAFA);
    text-align: right;
    /* Text/Medium */
    font-family: "Tajawal", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.2px; /* 170% */
  }
  
  .h3 {
    color: var(--Common-Neutral-Medium, #A1A1AA);
  }
  
  .frame1 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  
  .frame1 p {
    padding: 6px 12px;
    border-radius: 800px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    background: var(--Common-Neutral-Lower, #27272A);
    color: white;
    font-size: 14px;
    font-weight: 600;
  }
  
  .list-cr {
    display: flex;
    padding: 24px;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    background: var(--Common-Neutral-Lowest, #18181B);
    /* Main Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 0px var(--Shadow-Primary-Shadow, rgba(0, 0, 0, 0.8));
    gap: 48px;
    flex: 1 0 0;
  }
  
  .list-cr p {
    color: var(--Common-Neutral-Hight, #D4D4D8);
    /* Label/Small */
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  
  .list-cr span {
    color: var(--Common-Neutral-Highter, #F4F4F5);
    /* Display/H3 */
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px; /* 100% */
    letter-spacing: -0.48px;
  }
  
  .list-imprt img {
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Low, #52525B);
    /* Main 2 Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 4px var(--Shadow-Primary-Shadow-Xl, rgba(0, 0, 0, 0.6));
  }
  
  .list-imprt div {
    padding: 8px 0px;
  }
  
  .list-imprt div h6,
  .list-imprt-2 div h6 {
    color: var(--Common-Neutral-Hightest, #FFF);
    /* Label/Small */
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  
  .list-imprt div p {
    width: 150px;
  }
  
  .list-imprt div p,
  .list-imprt-2 div p {
    color: var(--Common-Neutral-Hight, #D4D4D8);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 166.667% */
  }
  
  .ul-logos {
    display: flex;
    gap: 16px;
  }
  
  .ul-logos li {
    display: flex;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    background: var(--Common-Neutral-Lowest, #18181B);
    /* Main Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 0px var(--Shadow-Primary-Shadow, rgba(0, 0, 0, 0.8));
    gap: 24px;
  }
  
  .programs {
    margin-top: 72px;
    padding-top: 72px;
    border-top: 1px solid var(--Common-Neutral-Low, #52525B);
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .h2 {
    color: var(--Common-Neutral-Hightest, #FFF);
    font-family: Almarai;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px; /* 122.5% */
    letter-spacing: -0.4px;
  }
  
  .vertical-line {
    width: 8px;
    height: 64px;
    border-radius: 23px;
  }
  
  .types {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px) var(--sizes-button-input-nav-medium-padding-h, 12px);
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Tertiary-Default-Border, rgba(9, 9, 11, 0));
    background: var(--Button-Tertiary-Default-Background, rgba(9, 9, 11, 0));
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
  }
  
  .types:hover {
    background-color: #27272A;
  }
  
  .types p {
    color: var(--Button-Tertiary-Default-Text, #D4D4D8);
    /* Label/Small */
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  
  .ul-types {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .ul-types li {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sizes-button-input-nav-small-padding-v, 6px) var(--sizes-button-input-nav-small-padding-h, 12px);
    border-radius: 800px;
    border: 1px solid var(--Button-Primary-Default-Border, #F4F4F5);
    background: var(--Button-Primary-Default-Background, #F4F4F5);
    gap: var(--sizes-button-input-nav-small-gap, 6px);
  }
  
  .ul-types li p {
    color: var(--Button-Primary-Default-Text, #18181B);
    /* Label/Smaller */
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
  }
  
  .tv-details .search-container {
    display: flex;
    width: 322px;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px) var(--sizes-button-input-nav-medium-padding-h, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    border-radius: var(--Input-Border-radius, 8px);
  }
  
  .arrow-before,
  .arrow-after {
    display: flex;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Secondary-Disable-Border, #18181B);
    background: var(--Button-Secondary-Disable-Background, #18181B);
  }
  
  .arrow-after:hover {
    cursor: pointer;
    background-color: #52525B;
  }
  
  .th-num {
    display: flex;
    padding: var(--sizes-button-input-nav-small-padding-v, 6px) var(--sizes-button-input-nav-small-padding-h, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-small-gap, 6px);
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Secondary-Default-Border, #27272A);
    background: var(--Button-Secondary-Default-Background, #27272A);
  }
  
  .th-num span {
    display: flex;
    height: var(--sizes-button-input-nav-small-line-height, 16px);
    padding: 0px var(--sizes-button-input-nav-small-gap, 6px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-small-dot-size, 4px);
    border-radius: var(--Badge-Border-radius, 9999px);
    background: var(--Badge-Secondary-Background, #52525B);
    color: var(--Badge-Secondary-Text, #D4D4D8);
    /* Label/Smallest */
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
  }
  
  .th-num p {
    color: var(--Button-Secondary-Default-Text, #D4D4D8);
    /* Label/Smaller */
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
  }
  
  .h6 {
    color: var(--Common-Neutral-Hight, #D4D4D8);
    /* Heading/H3 */
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  
  .list-imprt-2 {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    transition: background-color 0.5s ease;
  }
  
  .list-imprt-2:hover {
    background-color: rgb(20, 20, 20);
  }
  
  .list-imprt-2:hover .list-imprt-2-hover {
    transform: translate(-50%, 50%);
    opacity: 1;
  }
  
  .list-imprt-2:hover .img {
    background-size: 120% 120%;
  }
  
  .list-imprt-2:hover .img::before {
    opacity: 1;
  }
  
  .list-imprt-2 img {
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    /* Main 2 Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 4px var(--Shadow-Primary-Shadow-Xl, rgba(0, 0, 0, 0.6));
  }
  
  .list-imprt-2 div {
    padding: 12px;
  }
  
  .list-imprt-2-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 140%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in, transform 0.5s ease;
  }
  
  .list-imprt-2 .img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  .list-imprt-2 .img.img0 {
    background-image: url("/assets/images/program-img-1.png");
  }
  
  .list-imprt-2 .img.img1 {
    background-image: url("/assets/images/program-img-2.png");
  }
  
  .list-imprt-2 .img.img2 {
    background-image: url("/assets/images/program-img-3.png");
  }
  
  .list-imprt-2 .img.img3 {
    background-image: url("/assets/images/program-img-4.png");
  }
  
  .list-imprt-2 .img {
    transition: background-size 0.5s ease;
    overflow: hidden;
    position: relative;
    display: flex;
    width: 320px;
    height: 190px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: var(--Common-Neutral-Lowest, #18181B);
    /* Main 2 Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 4px var(--Shadow-Primary-Shadow-Xl, rgba(0, 0, 0, 0.6));
  }
  
  .list-imprt-2-hover div {
    display: flex;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px) var(--sizes-button-input-nav-medium-padding-h, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    flex: 1 0 0;
    border-radius: var(--Button-Border-radius, 8px);
  }
  
  .list-imprt-2-hover span {
    display: flex;
    height: var(--sizes-button-input-nav-small-line-height, 16px);
    padding: 0px var(--sizes-button-input-nav-small-gap, 6px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-small-dot-size, 4px);
    border-radius: var(--Badge-Border-radius, 9999px);
    background: var(--Badge-Secondary-Background, #52525B);
    color: var(--Badge-Secondary-Text, #D4D4D8);
    /* Label/Smallest */
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
  }
  
  .list-imprt-2-hover div h6 {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  
  .list-imprt-2-hover div:last-child h6 {
    color: var(--Button-Primary-Default-Text, #18181B);
  }
  
  .list-imprt-2-hover div:first-child h6 {
    color: var(--Button-Secondary-Default-Text, #D4D4D8);
  }
  
  .list-imprt-2-hover div:last-child {
    border: 1px solid var(--Button-Primary-Default-Border, #F4F4F5);
    background: var(--Button-Primary-Default-Background, #F4F4F5);
  }
  
  .list-imprt-2-hover div:first-child {
    border: 1px solid var(--Button-Secondary-Default-Border, #27272A);
    background: var(--Button-Secondary-Default-Background, #27272A);
  }
  
  body.tv-details .back {
    margin-bottom: 350px;
  }
  
  .hero-4 {
    background-image: url("/assets/images/Rectangle 26.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 2.25rem 0 3.5rem 0;
    padding: 48px;
    height: 750px;
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Low, #52525B);
    /* Main 2 Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 4px var(--Shadow-Primary-Shadow-Xl, rgba(0, 0, 0, 0.6));
  }
  
  .cl-btn {
    display: flex;
    padding: var(--sizes-button-input-nav-large-padding-v, 12px) var(--sizes-button-input-nav-large-padding-h, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-large-gap, 8px);
    border-radius: var(--Button-Border-radius, 8px);
  }
  
  .cl-btn h6 {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  
  .cl-btn.blk {
    border: 1px solid var(--Button-Secondary-Default-Border, #27272A);
    background: var(--Button-Secondary-Default-Background, #27272A);
  }
  
  .cl-btn.blk h6 {
    color: var(--Button-Secondary-Default-Text, #D4D4D8);
  }
  
  .cl-btn.wht {
    border: 1px solid var(--Button-Primary-Default-Border, #F4F4F5);
    background: var(--Button-Primary-Default-Background, #F4F4F5);
  }
  
  .cl-btn.wht h6 {
    color: var(--Button-Primary-Default-Text, #18181B);
  }
  
  .hero-4 h2 {
    color: var(--Common-Neutral-Default, #FAFAFA);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px; /* 122.5% */
    letter-spacing: -0.4px;
  }
  
  .hero-4 p {
    max-width: 590px;
    color: var(--Common-Neutral-Default, #FAFAFA);
    /* Text/Medium */
    font-family: "Tajawal", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.2px; /* 170% */
  }
  
  span.dot {
    width: 24px;
    height: 24px;
  }
  
  .bias {
    width: 16px;
    height: 16px;
    border-radius: 6px;
  }
  
  .vedio-time {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    border-radius: var(--Button-Border-radius, 8px);
    background: var(--color-dark-80, rgba(9, 9, 11, 0.8));
    color: var(--Common-Neutral-Default, #FAFAFA);
    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    z-index: 2;
  }
  
  .vedio-details .img {
    align-items: flex-start;
  }
  
  .vedio-details .list-imprt-2 .img.img0 {
    background-image: url("/assets/images/Image8.png");
  }
  
  .vedio-details .list-imprt-2 .img.img1 {
    background-image: url("/assets/images/Image1.png");
  }
  
  .vedio-details .list-imprt-2 .img.img2 {
    background-image: url("/assets/images/Image3.png");
  }
  
  .vedio-details .list-imprt-2 .img.img3 {
    background-image: url("/assets/images/Image4.png");
  }
  
  .vedio-details .list-imprt-2 h6 {
    max-width: 280px;
  }
  
  .vedio-details .cards {
    direction: ltr;
  }
  
  .vedio-details .search-container {
    display: flex;
    width: 322px;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px) var(--sizes-button-input-nav-medium-padding-h, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    border-radius: var(--Input-Border-radius, 8px);
  }
  
  .cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .cards .card-1 {
    display: flex;
    padding: 24px;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    background: var(--Common-Neutral-Lowest, #18181B);
    /* Main Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 0px var(--Shadow-Primary-Shadow, rgba(0, 0, 0, 0.8));
    gap: 24px;
    flex: 1 0 0;
  }
  
  .cards .card-1 .li-1 {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  
  .cards .card-1 .li-1 p {
    color: var(--color-zinc-400, #A1A1AA);
    /* Label M/Medium */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  
  .cards .card-1 .li-1 h6 {
    flex: 1 0 0;
    color: var(--Common-Neutral-Highter, #F4F4F5);
    text-align: right;
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
    letter-spacing: -0.18px;
  }
  
  .cards .card-1 .li-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 120px;
  }
  
  .cards .card-1 .li-2 ul {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1 0 0;
  }
  
  .cards .card-1 .li-2 ul li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  
  .cards .card-1 .li-2 ul li h6 {
    color: var(--color-zinc-300, #D4D4D8);
    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  
  .cards .card-1 .li-2 ul li p {
    flex: 1 0 0;
    color: var(--color-zinc-300, #D4D4D8);
    text-align: right;
    /* Label M/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  
  .frm1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-left: 8px;
    border-left: 1px solid #52525B;
  }
  
  .frm1 h6 {
    color: var(--Common-Neutral-Hightest, #FFF);
    /* Label/Smaller */
    font-family: "Tajawal", serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
  }
  
  .frm1 p {
    color: var(--Common-Neutral-Medium, #A1A1AA);
    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  .acrdn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    background: var(--Common-Neutral-Lowest, #18181B);
    
    /* Main Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 0px var(--Shadow-Primary-Shadow, rgba(0, 0, 0, 0.80));
  }
  .acrdn .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  .acrdn:hover {
    gap: 24px;
  }
  .header svg {
    transition: transform .5s ease;
  }
  .acrdn:hover .header svg {
    transform: rotate(45deg);
  }
  .acrdn:hover .wrapper {
    grid-template-rows: 1fr;
  }
  .acrdn .header {
    display: flex;
    align-items: center;
    gap: 48px;
    align-self: stretch;
  }
  .acrdn h6 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    overflow: hidden;
    color: var(--Common-Neutral-Highter, #F4F4F5);
    text-align: right;
    text-overflow: ellipsis;
    
    /* Heading/H3 */
    font-family: "Tajawal", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  .acrdn h5 {
    color: var(--Common-Neutral-Medium, #A1A1AA);
    
    /* Label/Medium */
    font-family: "Tajawal", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  .acrdn h4 {
    color: var(--Common-Neutral-Hightest, #FFF);
    
    /* Text/Medium */
    font-family: "Tajawal", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.2px; /* 170% */
  }
  .acrdn h3 {
    color: var(--Common-Neutral-Hight, #D4D4D8);
    
    /* Text/Medium */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.2px; /* 170% */
  }
  .acrdn .ctn-h4 {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border: 1px solid var(--Common-Neutral-Low, #52525B);
    background: var(--Common-Neutral-Lower, #27272A);
  }
  body.compare .bg-hero.img0 {
    height: 500px;
    background-size: 80%;
    margin-top: -110px;
    background-image: 
    linear-gradient(0deg, #09090B 25%, rgba(115, 115, 115, 0.00) 80%),
    linear-gradient(90deg, #09090B 0%, rgba(115, 115, 115, 0.00) 10%),
    linear-gradient(-90deg, #09090B 0%, rgba(115, 115, 115, 0.00) 10%),
    url("/assets/images/Header.png");
  }
  body.compare .bg-hero.img1 {
    height: 320px;
    margin-top: -70px;
    background-image: 
    linear-gradient(0deg, #09090B 0%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(90deg, #09090B 0%, rgba(115, 115, 115, 0.00) 40%),
    linear-gradient(-90deg, #09090B 0%, rgba(115, 115, 115, 0.00) 40%),
    url("/assets/images/bg-news-paper.png");
    background-size: cover;
  }
  body.compare .bg-hero{
    background-position: center top;
  }
  .unique-hd {
    margin-top: -350px;
  }
  .unique-hd button {
    width: fit-content;
  }
  .unique-hd h2 {
    color: var(--Common-Neutral-Hightest, #FFF);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px; /* 122.5% */
    letter-spacing: -0.4px;
  }
  .unique-hd p {
    color: var(--Common-Neutral-Hightest, #FFF);
    width: 565px;
    
    /* Text/Medium */
    font-family: "Tajawal", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.2px; /* 170% */
  }
  .ity {
    width: fit-content;
    display: flex;
    padding: 12px;
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Secondary-Default-Border, #27272A);
    background: var(--Common-Neutral-Lower, #27272A);
  }
  .r-1 {
    display: flex;
    padding: var(--sizes-button-input-nav-large-padding-v, 12px) var(--sizes-button-input-nav-large-padding-h, 16px);
    justify-content: space-between;
    align-items: center;
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Secondary-Default-Border, #27272A);
    background: var(--Button-Secondary-Default-Background, #27272A);
  }
  .r-1.active {
    position: relative;
    border-radius: var(--Button-Border-radius, 8px);
    outline: 6px solid var(--Button-Secondary-Hover-Border, #52525B);
    background: var(--Common-Neutral-Lowest, #18181B);
  }
  .r-1-search {
    position: absolute;
    top: 60px;
    left: 0;
    display: flex;
    width: 100%;
    padding: 6px;
    flex-direction: column;
    gap: 4px;
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Common-Neutral-Low, #52525B);
    background: var(--Common-Neutral-Lower, #27272A);
  }
  .r-1-search label {
    display: flex;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px) var(--sizes-button-input-nav-medium-padding-h, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    align-self: stretch;
    border-radius: var(--Input-Border-radius, 8px);
    border: 1px solid var(--Input-Primary-Default-Border, rgba(9, 9, 11, 0.00));
    background: var(--Input-Primary-Default-Background, #27272A);
  }
  .r-1-search label input::placeholder {
    color: var(--Input-Primary-Default-Text, #A1A1AA);
  }
  .r-1-search label input {
    color: white;
    border: none;
    outline: none;
    background-color: transparent;
    flex: 1 0 0;

    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  .r-1-search ul {
    border-top: 1px solid #52525B;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  .r-1-search ul li:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .r-1-search ul li {
    cursor: pointer;
    display: flex;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px) var(--sizes-button-input-nav-medium-padding-h, 12px);
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    align-self: stretch;
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Secondary-Default-Border, #27272A);
    background: var(--Button-Secondary-Default-Background, #27272A);
    color: var(--Button-Secondary-Default-Text, #D4D4D8);
    text-align: right;
    flex: 1 0 0;
    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  .r-1 h2 {
    color: var(--Common-Neutral-Hightest, #FFF);

    /* Label/Large */
    font-family: "Tajawal", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
  }
  .r-2 {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Secondary-Default-Border, #27272A);
    background: var(--Common-Neutral-Lowest, #18181B);
  }
  .line-list {
    width: 100%;
    height: 1px;
    background: var(--Common-Neutral-Low, #52525B);
  }
  .l-bt {
    width: fit-content;
    display: flex;
    padding: var(--sizes-button-input-nav-small-padding-v, 6px) var(--sizes-button-input-nav-small-padding-h, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-small-gap, 6px);
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Primary-Default-Border, #F4F4F5);
    background: var(--Button-Primary-Default-Background, #F4F4F5);
  }
  .l-bt h6 {
    color: var(--Button-Primary-Default-Text, #18181B);

    /* Label/Smaller */
    font-family: "Tajawal", serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
  }
  .li-mg.img0 {
    background-image: url("/assets/images/Rectangle\ 26.png");
  }
  .li-mg.img1 {
    background-image: url("/assets/images/cnn.png");
  }
  .li-mg {
    min-width: 240px;
    height: 260px;
    border-radius: 16px;
    border: 1px solid var(--Common-Neutral-Low, #52525B);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Main 2 Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 4px var(--Shadow-Primary-Shadow-Xl, rgba(0, 0, 0, 0.60));
  }
  .lk-bt {
    display: flex;
    padding: 4px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 43px;
    border: 1px solid var(--Common-Neutral-Lower, #27272A);
    background: var(--Common-Black-white-overlay-40, rgba(9, 9, 11, 0.40));
    
    /* Main Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 0px var(--Shadow-Primary-Shadow, rgba(0, 0, 0, 0.80));
  }
  .lk-bt p {
    color: var(--Common-Neutral-Default, #FAFAFA);

    /* Label M/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  .dv-3-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .dv-3-col h3 {
    color: var(--Common-Neutral-Hightest, #FFF);
    
    /* Display/H5 */
    font-family: "Tajawal", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
  }
  .dv-3-col p {
    /* Label M/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  .three-col .ul-logos {
    flex-wrap: wrap;
  }
  .card-tt {
    color: var(--Common-Neutral-Medium, #A1A1AA);

    /* Heading/H4 */
    font-family: "Tajawal", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
  }
  body.social-media {
    background-image: linear-gradient(0deg, rgba(94, 94, 94, 0.00) 70%, #c4c4c42b),
    url("/assets/images/Patter.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
  }
  .nm {

    /* Label M/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  body.social-media .bias {
    width: 8px;
    height: 8px;
    border-radius: 6px;
  }
  body.social-media .cards .card-1 .li-2 h6 {
    color: var(--Common-Neutral-Hightest, #FFF);

    /* Label M/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  body.social-media .card-1.bg-img {
    background-repeat: no-repeat;
  }
  body.social-media .card-1.bg-img.img0 {
    background-image: url("/assets/images/Frame\ 63.png");
    background-position: left bottom;
    background-size: 90%;
  }
  body.social-media .card-1.bg-img.img1 {
    background-image: 
    linear-gradient(90deg, #18181B 1%, #ff000000 10%),
    linear-gradient(180deg, #18181B 20%, #ff000000 80%),
    linear-gradient(0deg, #18181B 1%, #ff000000 10%),
    url("/assets/images/Map.png");
    background-size: 70%;
    background-position: left bottom;
  }
  .ctner-srch {
    cursor: text;
    display: flex;
    width: 690px;
    padding: 4px;
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    border-radius: 12px;
    background: var(--Common-Neutral-Lower, #27272A);
  }
  .ctner-srch input::placeholder {
    color: #A1A1AA;
  }
  .ctner-srch input {
    padding-right: 12px;
    border: none;
    outline: none;
    background-color: transparent;
    flex: 1 0 0;
    color: white;
    text-align: right;
    
    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  .ctner-srch:hover {
    outline: 1px solid var(--Common-Primary-brand-Medium, #71717A);
  }
  .ctner-srch:focus-within {
    outline: 4px solid var(--Common-Primary-brand-Medium, #71717A);
  }
  .ctner-srch .svg-srch {
    cursor: pointer;
    display: flex;
    padding: var(--sizes-button-input-nav-large-padding-v, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-large-gap, 8px);
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Primary-Default-Border, #F4F4F5);
    background: var(--Button-Primary-Default-Background, #F4F4F5);
  }
  .ctner-srch:focus-within .x-close {
    display: flex;
  }
  .ctner-srch .x-close {
    cursor: pointer;
    display: none;
    padding: var(--sizes-button-input-nav-small-padding-v, 6px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-small-gap, 6px);
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Primary-Default-Border, #F4F4F5);
    background: var(--Button-Primary-Default-Background, #F4F4F5);
  }
  .keywords {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .keywords li {
    cursor: pointer;
    display: flex;
    padding: var(--sizes-button-input-nav-large-padding-v, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-large-gap, 8px);
    border-radius: 8px;
    border: 1px solid var(--nav-tab-primary-default-border, #27272A);
    background: var(--nav-tab-primary-default-background, rgba(9, 9, 11, 0.40));
    color: var(--nav-tab-primary-default-text, #A1A1AA);

    /* Label/Medium */
    font-family: "Tajawal", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  .keywords li:hover {
    background-color: #27272A;
    color: white;
  }
  body.news-paper .img {
    align-items: center;
    justify-content: center;
    width: 190px;
  }
  body.news-paper .img.img4 {
/*    background-image: url("/assets/images/Rectangle\ 9.png");
*/    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .one-eye {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 800px;
    background: #FFF;
    z-index: 2;
    opacity: 0;
    transition: opacity .5s ease;
  }
  body.news-paper .list-imprt-2:hover .one-eye {
    opacity: 1;
  }
body.news-paper .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 5;
}

body.news-paper .header {
  z-index: 4;
}
/* NewspaperViewer */
body.news-paper {
  .icon-head:hover {
    background-color: #363639;
  }
  .icon-head {
    display: flex;
    padding: var(--sizes-button-input-nav-medium-padding-v, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--sizes-button-input-nav-medium-gap, 6px);
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Tertiary-Default-Border, rgba(9, 9, 11, 0.00));
    background: var(--Button-Tertiary-Default-Background, rgba(9, 9, 11, 0.00));
    cursor: pointer;
  }
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .zoomme, .numbers {
    display: flex;
    padding: 2px;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    background: var(--Common-Neutral-Lowest, #18181B);
    
    /* Main Shadow */
    box-shadow: -4px 8px var(--Shadow-Primary-Blur, 48px) 0px var(--Shadow-Primary-Shadow, rgba(0, 0, 0, 0.80));
  }
  .NewspaperViewer {
    z-index: 99;
    direction: ltr;
    outline: none;
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 70%;
    /*display: none;*/
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    background: #27272A;
  }
  .NewspaperViewer-head {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    padding: 24px;
    align-items: center;
    gap: 16px;
    background-color: #18181B;
    border-bottom: 1px solid #27272A;
  }
  .frame01 {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 0;
  }
  .frame01 ul {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 8px 8px 16px;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    background-color: #27272A;
    border-radius: 8px;
  }
  .frame01 ul li {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .frame01 ul li h4 {
    color: #F4F4F5;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px; /* 116.667% */
    letter-spacing: -0.36px;
  }
  .frame01 ul li p {
    color: #A1A1AA;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px; /* 116.667% */
    letter-spacing: -0.36px;
  }
  .NewspaperViewer-content {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  .side-div {
    gap: 8px;
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    border-left: 1px solid #27272A;
    background: #18181B;
  }
  .extra-mini-line {
    width: 16px;
    height: 1px;
    background: var(--Common-Neutral-200, #292524);
    border-radius: 8px;
  }
  .zoomme {
    gap: 4px;
  }
  .numbers p {
    display: flex;
    padding: 8px 16px;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    border-radius: 800px;
  }
  .zomming {
    width: 100%;
    height: min-content;
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .bottom-cotent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .big-img {
    background-image: url("/assets/images/tghjhjgkhjk.png");
    background-position: center;
    background-size: 28%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .numbers p {
    color: var(--Common-Neutral-Medium, #A1A1AA);
  
    /* Label M/Small */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  .numbers p:first-child {
    display: flex;
    width: 36px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: var(--Button-Border-radius, 8px);
    border: 1px solid var(--Button-Tertiary-Hover-Border, #27272A);
    background: var(--Button-Tertiary-Hover-Background, #27272A);
    color: var(--Common-Neutral-Hightest, #FFF);
  
    /* Label M/Small */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  /* Class to show elements when needed */
  .is-visible {
    display: flex !important;
    /* Ensure flex display when shown */
  }
  #openBtn {
    pointer-events: none;
  }
  .draft-search {
    display: flex;
    max-width: 335px;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    background: var(--Common-Neutral-100, #F5F5F5);
  }
  .draft-img {
    background-color: #E7E7E7;
    display: none;
    max-width: 335px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    background: #18181B;
  }
  .draft-img-div1 {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    align-self: stretch;
  }
  .draft-search-div1 p {
    color: #fff;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 171.429% */
    letter-spacing: -0.42px;
  }
  .draft-search-div1 {
    gap: 24px;
    display: flex;
    padding: 16px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    border-bottom: var(--spacing-px-1-px-1-px, 1px) solid #27272A;
    background: #18181B;
  }
  .draft-search-div2 {
    display: flex;
    padding: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    border-bottom: 0.5px solid #27272A;
    background: #18181B;
  }
  .draft-search-div2 p {
    color: #A1A1AA;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.96px;
  }
  .draft-search-div2 input {
    display: flex;
    padding: 8px 12px 8px 8px;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    flex: 1 0 0;
    border: none;
    outline: none;
    text-align: end;
    border-radius: 8px;
    border: 0.5px solid var(--Common-Neutral-Low, #52525B);
    background: var(--Common-Neutral-Lower, #27272A);
    color: white;
    text-align: right;
    text-overflow: ellipsis;
    
    /* Label/Small */
    font-family: "Tajawal", serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
  }
  .draft-search-div2 input::placeholder {
    color: var(--Button-Tertiary-Default-Text, #D4D4D8);
  }
  .resulta {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    align-self: stretch;
    border-bottom: var(--spacing-px-1-px-1-px, 1px) solid #27272A;
  }
  .resulta h4 {
    color: #A1A1AA;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.42px;
  }
  .resulta .resu {
    justify-content: space-between;
  }
  .resulta .match {
    justify-content: flex-end;
    gap: 6px;
  }
  .resulta span {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    width: 100%;
    border-radius: 800px;
    cursor: pointer;
  }
  .resulta span:hover {
    background-color: #363639;
  }
  .resulta span p {
    color: #D4D4D8;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.42px;
  }
  .draft-search-div3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #18181B;
  }
  .arrows-to {
    display: flex;
  }
  .arrows-to span {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 800px;
    cursor: pointer;
  }
  .arrows-to span:nth-child(2) svg path {
    fill: #787572;
  }
  .close-draft-img {
    display: flex;
    padding: 6px;
    justify-content: center;
    align-items: center;
    border-radius: 800px;
    cursor: pointer;
  }
  .close-draft-img:hover {
    background-color: #363639;
  }
  .zome-2 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .inner2-draft-img-div1 {
    display: flex;
    align-items: center;
    gap: 24px;
    align-self: stretch;
  }
  .inner2-draft-img-div1 p {
    overflow: hidden;
    color: #F4F4F5;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px; /* 100% */
    letter-spacing: -0.42px;
  }
  .draft-img-div2::-webkit-scrollbar {
    width: 6px;
  }
  .draft-img-div2::-webkit-scrollbar-track {
    background: transparent;
  }
  .draft-img-div2::-webkit-scrollbar-thumb {
    border-radius: 108px;
    background: #A1A1AA;
  }
  .draft-img-div2 {
    overflow: auto;
    height: 300px;
    padding: 48px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    background: #18181B;
  }
  .draft-img-div2 ul {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-123-rem-48-px, 48px);
  }
  .draft-img-div2 ul li {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-radius: 16px;
  }
  .draft-img-div2 ul li:hover img {
    transition: padding .3s ease;
    background-color: #A8A6A5;
    padding: 4px;
  }
  .draft-img-div2 ul li img {
    display: flex;
    width: 125px;
    height: 219px;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: var(--Common-Neutral-0, #FFF);
  }
  .draft-img-div2 ul li span {
    display: flex;
    padding: 4px 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    color: #F4F4F5;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px; /* 100% */
    letter-spacing: -0.42px;
  }
}
/*.tv-channels .channels li:nth-child(1) span {
    background: url("/assets/images/bg-BBC.jpg") center/cover no-repeat;
}
*/
.tv-channels .channels li span {
    background: url("/assets/images/bg-BBC.jpg") center/cover no-repeat;
}


.smallChangeStyleIcon {
    width: 16px !important;
    height: 16px !important;
}