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

* {
    scrollbar-color: #e41424 #1a1a1a; 
    scrollbar-width: thin;
}

      html,
      body {
        width: 100%;
        overflow-x: hidden;
        background: black;
        font-family: "Inter", sans-serif;
      }

      body::-webkit-scrollbar {
        width: 6px;
      }

      body::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50px;
      }

      .hero-title {
        font-family: "Anton", sans-serif;
        letter-spacing: 2px;
        color: #fff;
      }

       .policy-heading {
        font-family: "Anton", sans-serif;
        letter-spacing: 1px;
      }

      /* VIDEO */
      .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.1);
        animation: videoZoom 18s ease-in-out infinite alternate;
      }

      .header{
        background-color: transparent !important;
      }

      @keyframes videoZoom {
        0% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }

      /* OVERLAY */
      .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.15)
          ),
          linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0.1)
          );
        z-index: 1;
      }

      /* GRAIN */
      .noise {
        position: absolute;
        inset: 0;
        z-index: 2;
        opacity: 0.04;
        pointer-events: none;
        background-image: url("https://grainy-gradients.vercel.app/noise.svg");
      }

      /* HAMBURGER */
      .menu-btn {
        width: 34px;
        height: 28px;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
      }

      .menu-btn span {
        width: 100%;
        height: 2px;
        background: #e41424;
        border-radius: 50px;
      }

      /* CLOSE ICON */
      .close-btn {
        width: 25px;
        height: 25px;
        position: relative;
        cursor: pointer;
      }

      .close-btn span {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 20px;
      }

      .close-btn span:nth-child(1) {
        transform: rotate(45deg);
      }

      .close-btn span:nth-child(2) {
        transform: rotate(-45deg);
      }

      /* DESKTOP MENU */
      .desktop-menu a {
        position: relative;
      }

      .desktop-menu a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0%;
        height: 3px;
        background: #fff;
        transition: 0.4s ease;
      }

      .desktop-menu a:hover::after {
        width: 100%;
      }

      /* MOBILE MENU */
     .mobile-menu {
    position: fixed;
    top: -900%;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(20px);
    z-index: 999;
    transition: top 0.6s ease;
}

.mobile-menu.active {
    top: 0;
}

     .mobile-menu a {
    position: relative;
}

.mobile-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 3px;
    background: #fff;
    transition: 0.4s ease;
}

.mobile-menu a:hover::after {
    width: 100%;
}

      /* SHOP TEXT */
      .shop-text {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
      }

      /* RESPONSIVE */
      @media (max-width: 768px) {
        .menu-btn {
          display: flex;
        }

        .desktop-menu {
          display: none;
        }

        #userSection{
          display:none !important;
        }

        .center-title {
          font-size: 60px !important;
          line-height: 0.95;
        }

        .logo-text {
          font-size: 32px !important;
        }
        .midlogo{
          width:160px !important;
        }

        .bag-text {
          font-size: 26px !important;
        }
      }

      @media (max-width: 480px) {
        .center-title {
          font-size: 52px !important;
        }

        .logo-text {
          font-size: 28px !important;
        }

        .bag-text {
          font-size: 22px !important;
        }
      }



      /***** shop page  * / 
  /* TABLE */
      .policy-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 30px;
      }

      .policy-table th,
      .policy-table td {
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 18px 20px;
        text-align: left;
      }

      .policy-table th {
        background: rgba(255, 255, 255, 0.08);
        font-weight: 700;
      }
       .policy-title {
          font-size: 2.5rem !important;
          text-align: center;
          color: #fff;
        }

      .policy-table td {
        color: rgba(255, 255, 255, 0.9);
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {
        .desktop-menu {
          display: none;
        }

        .menu-btn {
          display: flex;
        }

        .content-wrapper {
          padding-left: 0 !important;
        }

        .policy-container {
          padding: 130px 25px 80px;
        }

        .policy-title {
          font-size: 2.5rem !important;
          text-align: center;
          color: #fff;
        }
      }

      @media (max-width: 768px) {
        .policy-title {
          font-size: 46px !important;
        }

        .policy-content {
          font-size: 15px !important;
          line-height: 1.7 !important;
        }

        .policy-table {
          display: block;
          overflow-x: auto;
          white-space: nowrap;
        }
      }

      @media (max-width: 480px) {
        .policy-title {
          font-size: 38px !important;
        }

        .logo-text {
          font-size: 28px !important;
        }
      }

      /* PRODUCT CARD */
      .product-card {
        transition: 0.5s ease;
        cursor: pointer;
      }

      .product-image {
        transition: 0.6s ease;
      }

      .product-card:hover .product-image {
        transform: scale(1.06) rotate(-2deg);
      }

      .product-card:hover {
        transform: translateY(-8px);
      }

      .product-title {
        font-size: 18px;
        line-height: 1.4;
        color: #fff;
      }

      .product-price {
        font-size: 18px;
        color:#fff;
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {
       

        .content-wrapper {
          padding-left: 0 !important;
        }

        .products-grid {
          grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
          ) !important;
          gap: 60px 30px !important;
        }
      }

      @media (max-width: 768px) {
        .products-grid {
          grid-template-columns: 1fr !important;
          gap: 70px !important;
        }

        .product-title {
          font-size: 16px;
        }

        .product-price {
          font-size: 16px;
        }

        .shop-section {
          padding-top: 140px !important;
        }
      }


      /**** product details */ 


      /* GALLERY */
      .gallery-arrow {
        background: transparent;
        border: none;
        color: white;
        font-size: 1.55rem;
        cursor: pointer;
        transition: 0.35s ease;
        line-height: 1;
      }

      .gallery-arrow:hover {
        transform: scale(1.15);
        opacity: 0.7;
      }

      .thumb-image {
        cursor: pointer;
        transition: 0.4s ease;
        border: 2px solid transparent;
      }

      .thumb-image.active {
        border-color: white;
        transform: scale(1.04);
      }

      .thumb-image:hover {
        opacity: 0.7;
      }

      .main-product-image {
        transition: 0.5s ease;
      }

      /* SIZE */
      .size-btn {
        width: 54px;
        height: 54px;
        border: 1px solid
          rgba(255, 255, 255, 0.5);
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s ease;
        cursor: pointer;
      }

      .size-btn:hover,
      .size-btn.active {
        background: #e41424;
        color: black;
      }

      /* ADD TO BAG */
      .add-to-bag-btn {
        position: relative;
        color: white;
        transition: 0.4s ease;
      }

      .add-to-bag-btn:hover {
        letter-spacing: 4px;
        color: #e41424 !important;
        transform: translateY(-4px);
      }


      /* ============================= */
/* PERFECT MOBILE RESPONSIVE CSS */
/* ============================= */

@media (max-width: 1200px) {
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
    padding-top: 130px !important;
  }

  .content-wrapper {
    padding-left: 0 !important;
  }

  .desktop-menu {
    display: none !important;
  }

  .menu-btn {
    display: flex !important;
  }

  .gallery-column {
    order: 2;
    width: 100%;
  }

  .details-column {
    order: 3;
    width: 100%;
  }

  .main-image-column {
    order: 1;
  }

  .main-product-image {
    width: 75% !important;
  }
}

/* TABLET */
@media (max-width: 768px) {
  /* LAYOUT */
  .product-layout {
    padding: 120px 20px 70px !important;
    gap: 40px !important;
  }

  /* LOGO */
  .logo-text {
    font-size: 30px !important;
  }

  /* PRODUCT IMAGE */
  .main-product-image {
    width: 100% !important;
    max-width: 500px;
  }
  

  /* THUMBNAIL ROW */
  .gallery-column {
    width: 100%;
    align-items: center;
  }

  .thumb-wrapper {
    flex-direction: row !important;
    overflow-x: auto;
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .thumb-wrapper::-webkit-scrollbar {
    display: none;
  }

  .thumb-image {
    min-width: 90px;
    height: 110px !important;
  }

  /* ARROWS */
  .gallery-arrow {
    font-size: 48px !important;
  }

  /* TITLE */
  .product-title {
    font-size: 42px !important;
    line-height: 1.1 !important;
    margin-bottom: 25px !important;
  }

  /* LIST */
  .details-column ul {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  /* DESCRIPTION */
  .details-column p {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  /* PRICE */
  .details-column h2 {
    font-size: 48px !important;
  }

  /* COLOR TEXT */
  .details-column h3 {
    font-size: 20px !important;
  }

  /* STAR */
  .details-column .text-\[70px\] {
    font-size: 50px !important;
  }

  /* SIZE ROW */
  .size-row {
    flex-wrap: wrap;
    gap: 12px !important;
  }

  .size-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 14px !important;
  }

  /* ADD TO BAG */
  .add-to-bag-btn {
    font-size: 52px !important;
    line-height: 1 !important;
  }
}

/* MOBILE */
@media (max-width: 480px) {
  /* BODY */
  body {
    overflow-x: hidden;
  }

  /* HEADER */
  header {
    padding: 20px !important;
  }

  /* LOGO */
  .logo-text {
    font-size: 26px !important;
  }

  /* BAG */
  header .text-3xl {
    font-size: 26px !important;
  }

  /* MAIN LAYOUT */
  .product-layout {
    padding: 110px 16px 60px !important;
    gap: 35px !important;
  }

  /* MAIN IMAGE */
  .main-product-image {
    width: 100% !important;
    border-radius: 10px;
  }

  /* THUMBNAILS */
  .thumb-wrapper {
    gap: 12px !important;
  }

  .thumb-image {
    min-width: 72px !important;
    height: 90px !important;
  }

  /* ARROWS */
  .gallery-arrow {
    font-size: 38px !important;
    display: none;
  }

  /* BACK */
  .details-column .hero-title.text-\[28px\] {
    font-size: 22px !important;
  }

  /* TITLE */
  .product-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  /* FEATURES */
  .details-column ul {
    font-size: 14px !important;
    line-height: 1.7 !important;
    padding-left: 18px !important;
  }

  /* DESCRIPTION */
  .details-column p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* PRICE */
  .details-column h2 {
    font-size: 40px !important;
  }

  /* COLOR */
  .details-column h3 {
    font-size: 17px !important;
  }

  /* STAR */
  .details-column .text-\[70px\] {
    font-size: 42px !important;
  }

  /* SIZE GUIDE */
  .size-row {
    gap: 10px !important;
  }

  .size-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  /* ADD TO BAG */
  .add-to-bag-btn {
    font-size: 38px !important;
    padding-bottom: 12px !important;
  }

 
}

      /* RESPONSIVE */
      @media (max-width: 1200px) {
        .product-layout {
          grid-template-columns: 1fr !important;
          gap: 60px !important;
        }

        .content-wrapper {
          padding-left: 0 !important;
        }

        .desktop-menu {
          display: none;
        }

        .menu-btn {
          display: flex;
        }

        .gallery-column {
          order: 2;
        }

        .details-column {
          order: 3;
        }

        .main-image-column {
          order: 1;
        }
      }

      @media (max-width: 768px) {
        .product-title {
          font-size: 42px !important;
          line-height: 1.1;
        }

        .product-layout {
          padding-top: 140px !important;
        }

        .thumb-wrapper {
          flex-direction: row !important;
          overflow-x: auto;
        }
        .gallery-column{
          margin-top:-40px !important;
        }

        .thumb-wrapper img {
          min-width: 90px;
        }

        .size-row {
          flex-wrap: wrap;
        }

        .add-to-bag-btn {
          font-size: 52px !important;
        }
      }

      @media (max-width: 480px) {
        .logo-text {
          font-size: 28px !important;
        }

        .product-title {
          font-size: 34px !important;
        }

        .main-product-image {
          width: 100% !important;
        }

        .add-to-bag-btn {
          font-size: 42px !important;
        }
      }

      /*** size-guide  */ 


        /* ================================= */
    /* SLIDER */
    /* ================================= */

    .slider-wrapper{
      position:relative;
      width:100%;
      margin-bottom:70px;
    }

    .slider{
      display:flex;
      gap:24px;
      overflow-x:auto;
      scroll-behavior:smooth;
      scrollbar-width:none;
      padding-bottom:10px;
    }

    .slider::-webkit-scrollbar{
      display:none;
    }

    /* ================================= */
    /* NAV BUTTON */
    /* ================================= */

    .nav-btn{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:55px;
      height:55px;
      border-radius:50%;
      background:rgba(255,255,255,0.08);
      border:1px solid
        rgba(255,255,255,0.12);

      backdrop-filter:blur(10px);

      display:flex;
      align-items:center;
      justify-content:center;

      cursor:pointer;

      transition:.35s ease;

      z-index:10;

      font-size:22px;
    }

    .nav-btn:hover{
      background:white;
      color:black;
    }

    .prev-btn{
      left:10px;
    }

    .next-btn{
      right:10px;
    }

    /* ================================= */
    /* CARD */
    /* ================================= */

    .size-card{
      width:320px;
      height:400px;

      flex-shrink:0;

      border-radius:30px;

      background:linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
      );

      border:1px solid
        rgba(255,255,255,0.08);

      backdrop-filter:blur(12px);

      position:relative;

      overflow:hidden;

      transition:.45s ease;

      cursor:pointer;
    }

    .size-card::before{
      content:"";

      position:absolute;

      width:220px;
      height:220px;

      background:rgba(
        255,
        255,
        255,
        0.04
      );

      border-radius:50%;

      top:-120px;
      right:-120px;

      transition:.45s ease;
    }

    .size-card:hover::before,
    .size-card.active::before{
      transform:scale(1.4);
    }

    .size-card:hover,
    .size-card.active{
      transform:translateY(-10px);

      border-color:rgba(
        255,
        255,
        255,
        0.2
      );

      box-shadow:0 25px 60px
        rgba(0,0,0,0.45);
    }

    .size-card.active{
      border:2px solid white;
    }

    .size-card img{
      width:220px;
      transition:.45s ease;
      opacity:.8;
    }

    .size-card:hover img,
    .size-card.active img{
      transform:scale(1.05);
      opacity:1;
    }

    /* ================================= */
    /* TABLE */
    /* ================================= */

    .table-wrapper{
      width:100%;
      overflow-x:auto;

      border-radius:30px;

      background:rgba(
        255,
        255,
        255,
        0.03
      );

      border:1px solid
        rgba(255,255,255,0.08);

      backdrop-filter:blur(10px);
    }

    .table-wrapper::-webkit-scrollbar{
      height:5px;
    }

    .table-wrapper::-webkit-scrollbar-thumb{
      background:rgba(
        255,
        255,
        255,
        0.2
      );
    }

    table{
      width:100%;
      min-width:950px;
      border-collapse:collapse;
    }

    thead{
      background:rgba(
        255,
        255,
        255,
        0.03
      );
    }

    thead th{
      padding:24px;
      font-size:17px;
      font-weight:700;
    }

    tbody td{
      padding:24px;
      border-bottom:1px solid
        rgba(255,255,255,0.05);

      color:rgba(
        255,
        255,
        255,
        0.92
      );
    }

    tbody tr:hover td{
      background:rgba(
        255,
        255,
        255,
        0.03
      );
    }

    tbody td:first-child,
    thead th:first-child{
      text-align:left;
      font-weight:700;
    }

    /* ================================= */
    /* TOGGLE BUTTON */
    /* ================================= */

    .toggle-box{
      display:inline-flex;

      border-radius:999px;

      overflow:hidden;

      border:1px solid
        rgba(255,255,255,0.15);
    }

    .toggle-btn{
      padding:14px 34px;

      font-size:14px;

      font-weight:600;

      transition:.35s ease;

      background:transparent;

      color:white;
    }

    .toggle-btn.active{
      background:#a2a2a2;
      color:black;
    }

    /* ================================= */
    /* RESPONSIVE */
    /* ================================= */

    @media(max-width:1200px){

      .desktop-menu{
        display:none !important;
      }

      .content-wrapper{
        padding-left:0 !important;
      }

      .menu-btn{
        display:flex !important;
      }
       

    }

    @media(max-width:768px){

      .logo{
        font-size:42px;
      }

      .page-title{
        font-size:58px !important;
        color: #fff;
      }

      .size-card{
        width:240px;
        height:310px;
      }

      .size-card h3{
        font-size:24px !important;
      }

      .size-card img{
        width:150px;
      }

      .nav-btn{
        width:45px;
        height:45px;
      }

      table{
        min-width:820px;
      }

      .philosophy-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 2px;
    margin-top: 60px;
}

    }

    @media(max-width:480px){

      .page-title{
        font-size:42px !important;
      }

      .slider{
        gap:14px;
      }

      .size-card{
        width:210px;
        height:270px;
        border-radius:22px;
      }

      .size-card h3{
        font-size:20px !important;
      }

      .size-card img{
        width:125px;
      }

      .nav-btn{
        width:40px;
        height:40px;
      }

      table{
        min-width:760px;
      }

      thead th,
      tbody td{
        padding:16px 12px;
        font-size:13px;
      }

      .toggle-btn{
        padding:11px 20px;
        font-size:12px;
      }

    }

    /*** cart css  */ 

    /* TABLE */
      .cart-table {
        width: 100%;
      }

      .cart-table th {
        font-size: 16px;
        font-weight: 500;
        padding-bottom: 24px;
        color: white;
      }

      .cart-divider {
        border-bottom: 1px solid
          rgba(255, 255, 255, 0.5);
      }

      .quantity-btn {
        background: transparent;
        border: none;
        color: white;
        font-size: 34px;
        cursor: pointer;
        transition: 0.3s ease;
      }

      .quantity-btn:hover {
        opacity: 0.7;
      }

      /* BUTTONS */
      .outline-btn {
        border: 1px solid
          rgba(255, 255, 255, 0.7);
        transition: 0.4s ease;
      }

      .outline-btn:hover {
        background: white;
        color: black;
      }

      .checkout-btn {
        background: #8d8d8d;
        color: #222;
      }

      /* CHECKBOX */
      .custom-checkbox {
        width: 28px;
        height: 28px;
        accent-color: white;
        cursor: pointer;
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {
       .desktop-menu {
          display: none;
        }

        .menu-btn {
          display: flex;
        }

        .content-wrapper {
          padding-left: 0 !important;
        }

        .cart-section {
          padding-top: 140px !important;
        }

        .cart-table-wrapper {
          overflow-x: auto;
        }

        .cart-table {
          min-width: 900px;
        }
      }

      @media (max-width: 768px) {
        .cart-title {
          font-size: 56px !important;
        }

        .summary-actions {
          flex-direction: column;
          width: 100%;
        }

        .summary-actions button {
          width: 100%;
        }
      }

      @media (max-width: 480px) {
        .cart-title {
          font-size: 42px !important;
        }

        .logo-text {
          font-size: 28px !important;
        }
      }


      /*** policy page */ 


           /* TABLE */
      .policy-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 30px;
      }

      .policy-table th,
      .policy-table td {
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 18px 20px;
        text-align: left;
      }

      .policy-table th {
        background: rgba(255, 255, 255, 0.08);
        font-weight: 700;
      }

      .policy-table td {
        color: rgba(255, 255, 255, 0.9);
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {
        .desktop-menu {
          display: none;
        }

        .menu-btn {
          display: flex;
        }

        .content-wrapper {
          padding-left: 0 !important;
        }

        .policy-container {
          padding: 130px 25px 80px;
        }

        .policy-title {
          font-size: 56px !important;
          text-align: center;
        }
      }

      @media (max-width: 768px) {
        .policy-title {
          font-size: 46px !important;
        }

        .policy-content {
          font-size: 15px !important;
          line-height: 1.7 !important;
        }

        .policy-table {
          display: block;
          overflow-x: auto;
          white-space: nowrap;
        }
      }

      @media (max-width: 480px) {
        .policy-title {
          font-size: 38px !important;
        }

        .logo-text {
          font-size: 28px !important;
        }
      }


      /*** signup */ 

        /* FORM */
      .signup-form {
        width: 100%;
        position: relative;
      }

      .signup-input {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding: 18px 55px 18px 12px;
        color: white;
        font-size: 20px;
        outline: none;
        transition: 0.3s ease;
      }

      .signup-input:focus {
        border-color: white;
      }

      .signup-input::placeholder {
        color: rgba(255, 255, 255, 0.45);
      }

      .submit-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 34px;
        cursor: pointer;
        transition: 0.3s ease;
      }

      .submit-btn:hover {
        color: white;
        transform: translateY(-50%) translateX(5px);
      }


      /*** checkuout */ 


       .mobile-link{
      font-size:38px;
      font-weight:900;
      text-transform:uppercase;
      width:fit-content;
      transition:.3s ease;
    }

    .mobile-link:hover{
      color:#8f8f8f;
      transform:translateX(6px);
    }

    /* ================================= */
    /* DESKTOP MENU */
    /* ================================= */

    .desktop-link{
      font-size:28px;
      font-weight:900;
      text-transform:uppercase;
      width:fit-content;
      position:relative;
      transition:.3s ease;
    }

    .desktop-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-4px;
      width:0%;
      height:3px;
      background:white;
      transition:.35s ease;
    }

    .desktop-link:hover::after{
      width:100%;
    }

    /* ================================= */
    /* CHECKOUT */
    /* ================================= */

    .glass-card{
      background:rgba(255,255,255,0.03);
      border:1px solid
        rgba(255,255,255,0.08);

      backdrop-filter:blur(10px);

      border-radius:32px;
    }

    .input-box{
      width:100%;
      height:60px;
      border-radius:18px;
      border:1px solid
        rgba(255,255,255,0.08);

      background:rgba(
        255,
        255,
        255,
        0.03
      );

      padding:0 22px;

      color:white;

      outline:none;

      transition:.35s ease;
    }

    .input-box:focus{
      border-color:white;
    }

    .input-box::placeholder{
      color:rgba(255,255,255,0.5);
    }

    .checkout-btn{
      width:100%;
      height:64px;

      border-radius:18px;

      background:white;

      color:black;

      font-size:16px;
      font-weight:800;
      text-transform:uppercase;

      transition:.35s ease;
    }

    .checkout-btn:hover{
      transform:translateY(-4px);
      background:#d9d9d9;
    }

    .payment-option{
      border:1px solid
        rgba(255,255,255,0.08);

      background:rgba(
        255,
        255,
        255,
        0.03
      );

      border-radius:20px;

      transition:.35s ease;

      cursor:pointer;
    }

    .payment-option.active{
      border-color:white;
      background:rgba(
        255,
        255,
        255,
        0.08
      );
    }

    .product-card{
      border-bottom:1px solid
        rgba(255,255,255,0.08);
    }

    /* ================================= */
    /* RESPONSIVE */
    /* ================================= */

    @media(max-width:1200px){

      .desktop-menu{
        display:none !important;
      }

      .content-wrapper{
        padding-left:0 !important;
      }

      .menu-btn{
        display:flex !important;
      }

    }

    @media(max-width:768px){

      .logo-text{
        font-size:40px;
      }

      .checkout-title{
        font-size:58px !important;
      }

    }

    @media(max-width:480px){

      .checkout-title{
        font-size:42px !important;
      }

      .glass-card{
        border-radius:24px;
      }

      .input-box{
        height:54px;
        font-size:14px;
      }

      .checkout-btn{
        height:58px;
      }

    }


    	.auth-shell {
				position: relative;
				overflow: hidden;
			}

			.auth-shell::before,
			.auth-shell::after {
				content: "";
				position: absolute;
				border-radius: 999px;
				filter: blur(10px);
				pointer-events: none;
			}

			.auth-shell::before {
				width: 380px;
				height: 380px;
				left: -130px;
				top: -110px;
				background: radial-gradient(circle, rgba(228, 20, 36, 0.26), rgba(228, 20, 36, 0));
			}

			.auth-shell::after {
				width: 280px;
				height: 280px;
				right: -110px;
				bottom: -110px;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
			}

			.auth-panel {
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
				border: 1px solid rgba(255, 255, 255, 0.12);
				box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
				backdrop-filter: blur(18px);
			}

			.auth-copy {
				background: linear-gradient(135deg, rgba(228, 20, 36, 0.16), rgba(0, 0, 0, 0.05));
				border: 1px solid rgba(255, 255, 255, 0.08);
			}

			.field-label {
				letter-spacing: 0.14em;
			}

			.auth-input {
				width: 100%;
				background: rgba(255, 255, 255, 0.06);
				border: 1px solid rgba(255, 255, 255, 0.12);
				color: white;
				padding: 18px 18px;
				outline: none;
				transition: 0.3s ease;
			}

			.auth-input::placeholder {
				color: rgba(255, 255, 255, 0.5);
			}

			.auth-input:focus {
				border-color: rgba(228, 20, 36, 0.85);
				box-shadow: 0 0 0 4px rgba(228, 20, 36, 0.15);
			}

			.signup-btn {
				background: linear-gradient(135deg, #e41424, #b30f1c);
				letter-spacing: 0.18em;
				transition: 0.35s ease;
			}

			.signup-btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 18px 35px rgba(228, 20, 36, 0.28);
			}

			.auth-link {
				transition: 0.25s ease;
			}

			.auth-link:hover {
				color: #e41424;
			}

			.otp-overlay {
				position: fixed;
				inset: 0;
				background: rgba(0, 0, 0, 0.72);
				backdrop-filter: blur(18px);
				z-index: 1200;
				display: none;
				align-items: center;
				justify-content: center;
				padding: 24px;
			}

			.otp-overlay.active {
				display: flex;
			}

			.otp-modal {
				width: min(100%, 520px);
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
				border: 1px solid rgba(255, 255, 255, 0.14);
				box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
				backdrop-filter: blur(24px);
			}

			.otp-input {
				width: 100%;
				background: rgba(255, 255, 255, 0.06);
				border: 1px solid rgba(255, 255, 255, 0.12);
				color: white;
				padding: 16px 18px;
				outline: none;
				letter-spacing: 0.35em;
				text-align: center;
				font-size: 20px;
			}

			.otp-input:focus {
				border-color: rgba(228, 20, 36, 0.85);
				box-shadow: 0 0 0 4px rgba(228, 20, 36, 0.15);
			}

			.otp-btn {
				background: linear-gradient(135deg, #e41424, #b30f1c);
				transition: 0.3s ease;
			}

			.otp-btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 18px 35px rgba(228, 20, 36, 0.28);
			}

			@media (max-width: 991px) {
				.auth-layout {
					grid-template-columns: 1fr !important;
				}

				.auth-copy {
					min-height: auto !important;
				}

				.content-wrapper {
					padding-left: 0 !important;
				}
			}

			@media (max-width: 768px) {
				.auth-title {
					font-size: 48px !important;
				}

				.auth-subtitle {
					font-size: 20px !important;
				}
			}

			@media (max-width: 480px) {
				.auth-title {
					font-size: 38px !important;
				}

				.auth-panel,
				.auth-copy {
					padding-left: 20px !important;
					padding-right: 20px !important;
				}

				.otp-modal {
					padding: 24px !important;
				}
			}
@media (max-width: 1200px) {
        .main-video-wrapper {
            width: 75% !important;
        }
    }

    @media (max-width: 768px) {
        .main-video-wrapper {
            width: 100% !important;
            max-width: 500px;
        }
    }

    @media (max-width: 480px) {
        .main-video-wrapper {
            width: 100% !important;
        }
    }