.text-video{position:relative; z-index:2; color:white; text-align:center; top:40%; 
  width: 70%;
  margin-left: 15%;
  height: max-content;  
  --l_display: unset;
  --comp-display: unset;
  align-self: center;
  justify-self: center;
  pointer-events: auto;
}
.text-video h1, .text-video p{ color:#FFF;}
.text-video p{ font-size:15px;text-align:justify;  }

:root {
    --frame-size: 320px;
    --frame-radius: 22px;
    --gold1: #f7b733;
    --gold2: #fc4a1a;
    --inner-bg: #ffffff;
    --glass-bg: rgba(255,255,255,0.25);
    --text-dark: #222;
  }
   
 
  /* ------------------- Product Card ------------------- */
  .product-card {
    position: relative;
    /*width: var(--frame-size);*/
    aspect-ratio: 1/1;
    border-radius: var(--frame-radius);
    background: linear-gradient(145deg, var(--inner-bg), #f9f9f9);
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
    border: 6px solid transparent;
    background-clip: padding-box;
  }
 
  /* Animated golden border */
  .product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--frame-radius);
    padding: 5px;
    background: linear-gradient(120deg, var(--gold1), var(--gold2), var(--gold1));
    background-size: 200% 200%;
    animation: gradientMove 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
 
  /* hover animation */
  .product-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  }
 
  /* product image inside */
  .product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the box completely */
  border-radius: var(--frame-radius);
  display: block;
}
/*  .product-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--frame-radius);
  }*/
 
  /* bottom ribbon */
  .brand-ribbon {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    padding: 0 18px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
  }
 
  .brand-logo {
    background: linear-gradient(45deg, var(--gold1), var(--gold2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
  }
 
  .brand-sub {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    margin-left: 6px;
    opacity: 0.9;
    text-transform: uppercase;
    font-weight: 600;
  }
 
  /* ------------------- Animations ------------------- */
  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }