*, html {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background: #141414;
        font-family: "Lexend", sans-serif;
        background: url(../images/upcoming-bg.png);
        background-position: center;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
    }

    
    main {
        flex: 1; 
    }



    @font-face {
        font-family: 'SF Pro Display';
        src: url('./fonts/SF-Pro-Text-Semibold.otf') format('opentype');
        font-style: normal;
      }
      


 /* VECTOR */

    svg {
        width: 1rem;
        height: 1rem;
        color: white;
    }
  
  
    /* HEADER */

    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 0;
        max-width: 1400px;
        margin: 0 auto;
      }

      .svgg {
        color: #007bff;
      }

      .logo {
        font-family: "Unbounded", sans-serif;
        font-size: 0.9rem;
        color: white;
        font-weight: 900;
      }

      .logo a {
        text-decoration: none;
        color: white;
      }

      .nav-tom {
        display: flex;
        width: 568px;
        height: 75px;
        background-color: #0f0f0f;
        border-radius: 15px;
        padding: 0.5rem;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 2rem;
        border: 5px solid #1a1a1a;

      }
      
      nav a {
        text-decoration: none;
        color: white;
        font-size: 1rem;
        font-weight: 200;
        font-family: "Lexend", sans-serif;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.8rem 1.5rem;
      }
    
      nav a.active {
        background-color: #1a1a1a;
        color: white; 
        border-radius: 5px; 
      }


      .search-btn {
        margin-left: 11rem;
        display: flex;
        justify-content: flex-end;
      }
      
      .search-btn svg {
        width: 1.5rem;
        height: 1.5rem;
        color: white;
      }




      /* ==== HEADER ==== */

      .off-screen-menu {
        background-color: #111217;
        width: 75%;
        max-width: 600px;
        position: fixed; 
        top: 0;
        right: -600px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        transition: 0.3s ease;
        height: 100%;
        z-index: 1000; 
        overflow-y: auto; 
      }
      
      
      .off-screen-menu.active {
        right: 0;
      }
      
      .hamburger {
        display: none;
        
      }
      
      .nav-bar {
        width: 100%; 
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        
      }
      
      
      
      /* ham menu */
      .ham-menu {
        height: 40px;
        width: 30px;
        position: relative;
        cursor: pointer; 
        transition: transform 0.3s ease; 
      }
      
      .ham-menu:hover {
        transform: scale(1.1); 
      }
      
      .ham-menu span {
        height: 2.5px; 
        width: 90%;
        background-color: rgb(255, 255, 255);
        border-radius: 25px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: .3s ease;
      }
      
      .ham-menu span:nth-child(1) {
        top: 25%;
      }
      .ham-menu span:nth-child(3) {
        top: 75%;
      }
      .ham-menu.active span {
        background-color: white;
      }
      .ham-menu.active span:nth-child(1) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
      }
      .ham-menu.active span:nth-child(2) {
        opacity: 0;
      }
      .ham-menu.active span:nth-child(3) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      
      .ham-menu-ul li > a {
        color: white;
        font-size: 1rem;
        text-decoration: none;
        font-family: "Lexend";
        font-weight: 400;
        padding: 0.3rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: 0.3s ease;
        
      }

      .ham-menu-ul li > a > svg {
        width: 1.5rem;
        height: 1.5rem;
        color: white;
      }
      
      .ham-menu-ul li  {
        list-style: none;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.8rem;
        background: linear-gradient(135deg, #2e2e42, #424272, #28283b);
        
        padding-left: 1rem;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        border-radius: 5px;
        width: 15rem;
      }
      
      .ham-menu-ul {
        margin-top: 8rem;
      }

      





      /* SWIPER */

      .swiper-content {
        position: absolute;
        top: 10rem;
        left: 0;
        color: white;
        text-align: left;
        max-width: 665px;
        font-family: "DM Sans", sans-serif;
        margin-left: 4rem;
      }
    
      .swiper-content h2 {
        font-family: "DM Sans", sans-serif;
        font-size: 55px;
        font-weight: 750;
        margin-top: 0.5rem;
        text-shadow: 5px 5px 0.5rem black;
      }
    
      .swiper-content h3 {
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        display: flex;
        align-items: center;
        text-shadow: 5px 5px 0.5rem black;
    
    
      }
    
      .swiper-content h3 > img {
        width: 1.2rem;
      }
    
      .swiper-content span {
        font-size: 19px;
        font-weight: 500;
      }
    
      .little-content {
        font-size: 22px;
        font-weight: 550;
        margin-top: 0.8rem;
        text-shadow: 5px 5px 0.5rem black;
      }
    
      .little-content span {
        font-size: 20px;
        color: rgb(244, 239, 239);
        text-shadow: 5px 5px 0.5rem black;
      } 
    
      .text {
        margin-top: 0.5rem;
        font-size: 16px;
        font-weight: 400;
        color: rgb(244, 239, 239);
        line-height: 1.5;
        text-shadow: 1px 2px 0.2rem  black;
      }

      .swiper {
        max-width: 1450px;
        width: 100%;
        height: 600px;
        border-radius: 10px;
        margin-top: 1rem;
        position: relative;
      
      }
      
      .swiper:hover .swiper-button-next,
      .swiper:hover .swiper-button-prev {
        display: block;
      }
      
      .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      
      .swiper-slide img {
        width: 100%;
        height: auto;
        border-radius: 8px;
      }
      
      .swiper-pagination-bullet {
        background-color: white !important;
        width: 8px !important;
        height: 8px !important;
        opacity: 0.7 !important;
      }
      
      .swiper-pagination-bullet-active {
        background-color: white !important;
        opacity: 1 !important;
      }
      

      .swiper-button-next,
      .swiper-button-prev {
        color: white;
        font-weight: 900;
        transform: scale(0.5); 
        margin: 0 0.7rem; 
        font-size: 1.5rem; 
        display: none;
        font-family: "Lexend", sans-serif;
      
      }
      
      .swiper-button-next:hover,
      .swiper-button-prev:hover {
        color: white;
      }



     /* SEARCH */

    .search {
        display: flex;
        align-items: center;
        background-color: #0f0f0f;
        gap: 0.7rem;
        width: 40rem;
        height: 55px;
        border-radius: 10px;
        padding: 1rem 2rem;
        border: 3px solid #525252;
        display: none;
        /* justify-self: center; */
        /* position: absolute;
        left: 29%;
        bottom: -8rem; */

        
      }

    input {
        width: 100%;
        border: none;
        border-radius: 5px;
        background-color: #0f0f0f;
        color: white;
        font-size: 1rem;
        font-weight: 300;
        font-family: 'Lexend';
        outline: none;
      }
    
    input::placeholder {
        color: white;
        font-size: 1rem;
        font-weight: 300;
        font-family: 'Lexend';
        opacity: 0.5;   
      }

      



      /* GENRES */

    .genre-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0rem;
        margin-top: 2rem;
    }
      
    .genre-section {
        max-width: 1490px;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    
    .genre-title {
        font-size: 32px;
        color: #fff;
        font-family: "Lexend", sans-serif;
        font-weight: 770;
        margin-left: 1.4rem;

    }
    
    .genre-grid {
        display: flex;
        gap: 1.4rem;
        overflow-x: auto;
        padding: 1rem;
    }
    
    .genre-grid::-webkit-scrollbar {
        height: 5px;
        border-radius: 4px;
      }
      
    .genre-grid::-webkit-scrollbar-thumb {
        background: black;
        border-radius: 4px;
      }

      .load-more {
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 300;
        font-family: "Lexend", sans-serif;
        color: white;
        margin-right: 1rem;
      }

      .load-more:hover {
        opacity: 0.5;
      }

      .load-more svg {
        margin-top: 0.2rem;
      }

      /* CARD */

    .grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        gap: 1rem; 
        padding: 1rem; 
        max-width: 1500px;
        margin: 0 auto;
        flex-wrap: wrap;
    }
    
    .card { 
        box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
        cursor: pointer; 
        width: 12.4rem;
        height: 18.6rem;
        flex: 0 0 auto;
        overflow: hidden;
        border-radius: 10px;
        position: relative;
    }
    
    .card img { 
        width: 100%; 
        height: 100%;
        object-fit: cover; 
    }
    
    .card button { 
        margin: 0.5rem; 
        padding: 0.6rem; 
        border: none; 
        border-radius: 6px; 
        background: #020d42; 
        color: white; 
        cursor: pointer;
        position: absolute; 
        top: 5px;
        left: 70%;
        display: block;
    }
      
    .card:hover { 
          transform: scale(1.05);
          cursor: pointer;
          transition: all 0.3s ease-in-out;
          box-shadow: 0 4px 12px rgba(0,0,0,0.2); 

      }
      
      .card h3 {
          position: absolute;
          bottom: 10px;
          left: 10px;
          font-size: 0.8rem;
          color: white;
          font-family: "Lexend", sans-serif;
          max-width: 80%;
          text-align: left;
          text-shadow: 2px 2px 0.09rem black;
          display: none;
      }
      
      .card:hover h3 { 
          display: block; 
          transition: all 0.3s ease-in-out; 
      }
      
      .card > button > svg { 
          width: 1rem; 
          height: 1rem; 
          color: white; 
      }

    /* === Details === */
      
      .details { 
          padding: 1rem; 
          max-width: 1300px;
          margin: 0 auto;
          margin-left: 6rem;
      }
      
      .details img { 
         width: 16rem;
         height: 24rem;
        float: left; 
        margin-right: 2rem;
        border-radius: 10px;
      }
      
      .details h2 { 
          margin-top: 0; 
          font-family: "Lexend", sans-serif;
          font-size: 3rem;
          max-width: 65%;
      }
      
      .details p {
        color: rgba(255, 255, 255, 0.71);
        font-weight: 300;
      } 
      
      hr {
        margin: 1rem 0;
        color: rgba(255, 255, 255, 0.586);
      }
      
      .buttons {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-direction: column;
        justify-content: center;
        margin-top: 1rem;
      
      }
    
      
      .buttons > button { 
      
          width: 13rem;
          height: 3rem;
          border: none; 
          border-radius: 4px; 
          cursor: pointer; 
         
          color: white; 
          font-family: "Lexend", sans-serif;
          display: flex;
          font-size: 1rem;
          justify-content: center;
          align-items: center;
          gap: 0.4rem;
          
      }

      .watchlist {
        background: linear-gradient(90deg, #0e99ff 0%, #22b1ed 100%); 
        box-shadow: 1px 1px 8px #22b1ed;
      }

      .seen {
        background: #0d1951;
        box-shadow: 1px 1px 20px #0d1951;
      }

      .watchlist:hover, .seen:hover {
        opacity: 0.5;
      }

      .goBack {
        padding: 0.6rem 0.9rem;
        background-color: transparent;
        color: white;
        cursor:pointer;
        border: none;
        font-family: "DM Sans";
        border-radius: 3px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.3rems;
        font-size: 1rem;
      }

    .page {
        padding: 1rem; 
        max-width: 1400px;
        margin: 0 auto;
        color: white;
    }

    .meta {
      display: flex;
      align-items: center;
      gap: 4rem;
      margin: 0.9rem;
      /* flex-direction: column; */
    }

    .meta> p {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.2rem;
      color: rgba(255, 255, 255, 0.586);
      font-size: 0.8rem;
    }

    strong {
      color: white;
      font-weight: 700;
    }


    .wrapper {
      display: flex;
      gap: 4rem;
    }

    .qisqacha {
      width: 50%;
    }

    .reyting {
      background: linear-gradient(135deg, #2e2e42, #424272, #28283b);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20rem;
      height: auto;
      margin-top: -6.5rem;
      padding: 2rem 1rem;
      border-radius: 17px;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.5);
      box-shadow: 0 0 30px #3d3d5c;
    }

    .reyting span {
      display: flex;
      flex-direction: column; 
      align-items: center;
    }

    .reyyy h3,
    .reyyy p {
      text-align: center;
      margin: 0; 
      padding: -05rem; 
    }

    .reyting strong {
      color: white;
      font-weight: 700;
    }

    .reyting p {
      color: white;
      text-align: center;
    }

    .rat {
      font-size: 5.4rem;
      font-weight: 900;
    }

    .ovoz strong {
      font-size: 1rem;
      font-weight: 500; 
    }


    #extraInfo {
    align-items: center;
    gap: 4rem;
    display: flex;

    }

    #extraInfo p {
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    }

    #content {
    display: none;
    }

    #pagination {
    display: none;
    }

    .hech {
      color: white;
    }

    .user-rating {
      margin-top: 1rem;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }


    .user-rating h4 {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    .user-rating select {
      padding: 0.5rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      justify-content: center;
      display: flex;
    }

    .user-rating p {
      margin-top: 0.5rem;
      font-size: 0.9rem;
    }

    #cast {
      margin-top: 2rem;
      max-width: 1200px;

    }

    #cast > h3 {
      margin-bottom: 1rem;
    }
    
    .cast-list {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-left: 1rem; 
    }
    
    .actor {
      text-align: center;
      width: 120px;
      height: 180px; 
    }
    
    .actor img {
      width: 100%;
      height: 150px; 
      border-radius: 10px;
      object-fit: cover; 
    }
    
    .actor p {
      margin-top: 1rem; 
      font-size: 0.8rem; 
      color: white;
    }

    #userRatingSelect {
      padding: 8px 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: #0d1951;
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: "LEXEND";
      margin-bottom: 0.3rem;
    }
    
    #userRatingSelect:hover {
      border: none;
      background-color: #0d1951;
    }
    
    #userRatingSelect:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }
    


    /* ====FOOTER==== */


    footer {
      background-color: #0b0b0b;
      color: white;
      margin-top: 120px;
      padding: 1.5rem 0.5rem;
      width: 100%; 
    }
    .footer-wrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .foot-content {
      display: flex;

      justify-content: space-between;
      padding-top: 4rem;
      flex-wrap: wrap;
    }

    .foot-box > h2 {
      color: white;
      font-size: 19px;
      font-family: "DM Sans";
      font-weight: 400;
      margin-bottom: 0.9rem;
    }

    .foot-box > ul {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .foot-box > ul > li {
      background: none;
      list-style: none;
    }

    .foot-box > ul > li > a {
      text-decoration: none;
      color: #858585;
      font-family: "DM Sans";
      font-size: 16px;
    }

    .foot-box > ul > li > a:hover {
      color: white;
    }

    .socials > a > svg {
      width: 3rem;
      height: 3rem;
      background-color: #2e2e2e;
      padding: 0.6rem;
      border-radius: 7px;
      
    }

    .line {
      margin-top: 4rem;
     
      width: 100%;
      height: 2px;
      background-color: #2e2e2e;
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 1rem;
      padding-bottom: 1rem;
    }

    .bottom h2 {
      font-family: "DM Sans";
      font-size: 14px;
      font-weight: 300;
      color: #858585;
    }

    .bottom-text a {
      text-decoration: none;
      color: #858585;
      font-family: "DM Sans";
      font-size: 14px;
    }

    .bottom-text span {

      color: #858585;
      font-family: "DM Sans";
      font-size: 14px;
    }

    /* RESPONSIV */
    @media (max-width: 768px) {
      .nav-tom {
        display: none;
      }
    
      .hamburger {
        display: block;
        /* margin-right: -1.4rem; */
      }

      .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2rem 1rem;
        
      }

      .logo {
        font-size: 0.6rem;
        margin-left: 0.5rem;
      }
    
      .off-screen-menu {
        max-width: 100%;
        padding: 1rem;
      }
    
      .search {
        width: 80%;
        max-width: 80%;
        position: absolute;
      }

      .search-btn {
        margin-left: 6rem;
        
       
      }

      
    
       .swiper {
        padding: 0 0.5rem;
        width: fill;
        height: 220px; 
        overflow: hidden;
      }
     
      .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        border-radius: 8px;
      }
    
      .genre-grid {
        gap: 0.5rem;
      }
    
      .card {
        width: 10rem;
        height: 15rem;
      }


      .swiper-content {
        top: 3.9rem;
        left: 0;
        text-align: left;
        max-width: 365px;
        margin-left: 1.8rem;
      }
    
      .swiper-content h2 {
        max-width: 100%;
        font-size: 28px;
        font-weight: 750;
        margin-top: 0.5rem;
      }
    
      .swiper-content h3 {
        font-size: 14px;
    
    
      }
    
      .swiper-content h3 > img {
        width: 1rem;
      }
    
      .swiper-content span {
        font-size: 12px;
        font-weight: 500;
      }
    
      .little-content {
        font-size: 14px;

      }
    
      .little-content span {
        font-size: 12px;
      } 
    
      .text {
        margin-top: 0.5rem;
        font-size: 12px;
        display: none;
      }


      .genre-grid::-webkit-scrollbar {
       display: none;
      }
      
      .genre-grid::-webkit-scrollbar-thumb {
        display: none;
      }

      .genre-title {
        font-size: 23px;
        
      }

      .grid {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card:hover {
        transform: scale(1)
      }

      .aaa {
        width: 80%;
      }

      .foot-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        gap: 1.5rem; 
        
      }

      .foot-box {
        width: 45%; 
        
      }

      .foot-box > h2 {
        font-size: 1rem; 
        margin-bottom: 0.5rem; 
      }

      .foot-box > ul {
        gap: 0.3rem; 
      }

      .foot-box > ul > li > a {
        font-size: 0.9rem; 
      }

      footer {
        
        margin-top: 3rem;
        padding: 1.5rem 0.5rem; 
      
      }

      .footer-wrapper {
         
        align-items: center;
        gap: 1.5rem; 
      }

      .foot-content {
         
        justify-content: center;
        gap: 1.5rem; 
        padding: 1rem;
      }

      .foot-box > h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem; 
      }

      .foot-box > ul {
        gap: 0.3rem; 
      }

      .foot-box > ul > li > a {
        font-size: 0.9rem; 
      }

      .socials {
        display: flex;
        justify-content: center;
        gap: 1rem;
      }

      .socials > a > svg {
        width: 2.5rem; 
        height: 2.5rem;
      }

      .line {
        margin-top: 2rem;
      }

      .bottom {
        flex-direction: column;
        gap: 0.5rem; 
      }

      .bottom h2 {
        font-size: 0.8rem; 
      }

  

      .bottom-text a {
        font-size: 0.8rem; 
      }

      .details {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem; 
        margin-left: 0;
        
      }

      .details img {
        width: 12rem;
        height: 18rem;
        
      }

      .poster {
        margin-left: 2rem;
      }

      .details h2 {
        margin-top: 1rem;
        font-size: 2rem; 
        text-align: center;
      }

      .details p {
        margin-top: 0.8rem;
        font-size: 0.9rem; 
      }

      .buttons {
       flex-direction: row; 
        gap: 0.8rem; 
        padding-bottom: 1rem;
        margin: 0;
        
      }

      .buttons > button {
        width: 7.4rem; 
        height: 2.7rem;
        font-size: 0.7rem; 
      }

      .reyting {
        align-self: center;
        height: auto; 
        align-items: center;
        margin-top: 2rem;
        padding: 2rem 10rem;
        border-radius: 10px;
        display: flex;
        
        justify-content: space-between;

      }

      .rat {
        font-size: 4rem;
        margin: 0; 
        padding: 0;
        
      }

      .ovoz {
        font-size: 0.8rem;
      }

      .wrapper {
        flex-direction: column;
        gap: 2rem;
      }

      .qisqacha {
        width: 100%; 
      }

      .meta {
        gap: 1rem; 
        margin: 0.5rem;
      }

      .meta > p {
        font-size: 0.8rem; 
      }

      #extraInfo {
        gap: 1rem; 
        margin-top: 1rem;
      }

      #extraInfo p {
        font-size: 0.8rem; 
      }

      .reyting span {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        gap: 2.5rem;
        

      }

      .user-rating {
        width: 50%;
      }

      .user-rating h4 {
        margin-top: -1.1rem;
        margin-bottom: 1.2rem;
        text-align: center;
      }

      .user-rating p {
        margin-top: 1.7rem;
        color: white;
        font-weight: 500;
      }

      .ovoz strong {
        margin-top: 4rem;
      }

      #cast {
        margin-top: 1.5rem;
        text-align: center; 
        
      }

      .cast-list {
        justify-content: center; 
        gap: 2rem; 
        margin-left: -0.2rem;
        margin-bottom: 1rem;
      }

      .actor {
        width: 80px;
        height: 120px;
        margin-bottom: 0.5rem;
      }

      .actor img {
        width: 100%;
        height: 100px; 
        border-radius: 8px; 
        margin-bottom: 0.4rem;
      }

      .actor p {
        font-size: 0.7rem; 
        margin-top: 1rem;
      }

      .details h2 {
        max-width: 100%;
      }
    }