/* Hero Banner  */


 .hero {
     position: relative;
     height: 100vh;
     overflow: hidden;
 }

 .hero-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hero-title {
     font-family: 'Hanken Grotesk', sans-serif;
     position: fixed;
     top: 20px;
     left: 0;
     width: 100%;
     z-index: 1;

     font-size: 12vw;
     font-weight: 800;
     text-align: center;
     color: white;
     letter-spacing: 0.05em;

     mix-blend-mode: difference;
 }

 /* card New, card Bestseller ,card collection01,card collection02 เเละ collection03 */
 .section {
     padding: 100px 10%;
     background: #eee;

     display: flex;
     flex-direction: column;
     align-items: center;

 }

 .content {
     margin-top: 50px;
     max-width: 600px;
     text-align: center;

 }

 .content h2 {
     font-size: 20px;
     margin-bottom: 15px;
 }

 .content p {
     color: #555;
     line-height: 1.6;
     font-size: 14px;
 }

 .center {
     text-align: center;
 }

 .full img {
     width: 100%;
 }

 .card-new {
     width: 572px;
     height: 566px;
     margin: 0 auto;
 }

 .card-new img,
 .card-new video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 .card {
     position: relative;
     overflow: hidden;
 }


 .img-default {
     width: 100%;
     display: block;
     transition: opacity 0.5s ease;
 }


 .bestseller-vdo {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .collection01-vdo {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     object-fit: cover;

     opacity: 0;

     transition: opacity 0.5s ease;
 }


 .card.large:hover .collection01-vdo {
     opacity: 1;
 }

 .card.large:hover .img-default {
     opacity: 0;
 }


 .card img {
     width: 100%;
     display: block;
     transition: opacity 0.4s ease;
 }


 .img-hover {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
 }


 .card:hover .img-hover {
     opacity: 1;
 }

 .card:hover .img-default {
     opacity: 0;
 }

 .overlay-text {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 60px;
     font-weight: 600;
     color: #ffffff;
     text-align: center;
     letter-spacing: 2px;
     background: rgba(0, 0, 0, 0.15);
 }

 .overlay-text.small {
     font-size: 40px;
 }

 .card:hover .overlay-text {
     background: rgba(0, 0, 0, 0.35);
     transition: 0.4s ease;
 }

 .grid-2 {
     margin-top: 60px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }