.swiper {
   /*   width: 950px; */
   /* width: 80%; */
   width: 1264px;
}

.card {
   position: relative;
   background: transparent;
   border-radius: 20px;
   /* margin: 0 20px; */
}

.card .card-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 30px;
   position: relative;
   z-index: 100;
   cursor: pointer;
}

/* 
*** HO: VIDEO-IMG ***
section .card .video-img {
   border-radius: 30px;
   height: 100%;
   width: 100%;
}

section .card .video-img img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   border-radius: 30px;
   transition: all 500ms;
}

.video-img:hover {
   opacity: 0;
} */

/* video cooking */
section#pop-recipe .card .video {
   border-radius: 30px;
   height: 100%;
   width: 100%;
   background-color: #000000;
   background-position: center;
   background-size: cover;
}

/* 
**HO: VIDEO-IMG**
section#pop-recipe .card:nth-child(-n + 1) .video {
   background-image: url(VDO/COVER/AroyD-KAOSOI01.00_01_56_04.Still006.png);
}

section#pop-recipe .card:nth-child(2) .video {
   background-image: url(VDO/COVER/AroyD-KAOSOI01.00_00_59_25.Still005.png);
}

section#pop-recipe .card:nth-child(3) .video {
   background-image: url(VDO/COVER/AroyD-KAOSOI01.00_00_03_28.Still004.png);
}

section#pop-recipe .card:nth-child(4) .video {
   background-image: url(VDO/VDO/short2.jpg);
} */

section#pop-recipe .card .video video {
   transition: all 0.3s ease-in-out;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 30px;
   opacity: 0;
}

section#pop-recipe .card .video:hover video {
   opacity: 1;
}


/* video cooking */
.card .name-profession {
   display: flex;
   flex-direction: column;
   /* align-items: center; */
   margin-top: 10px;
   /* color: #192459; */
   color: #fff;
}

.name-profession .name {
   font-size: 2rem;
   font-weight: 600;
   text-transform: capitalize;
}

.name-profession .surName {
   font-size: 1rem;
   /* font-size: 18px; */
   line-height: 1;
   min-height: 10vh;
}

.card .vdo-button {
   display: flex;
   justify-content: space-between;
   width: 100%;
   margin: 20px 0;
}

.vdo-button button {
   font-size: 1rem;
   font-weight: 600;
   color: #005197;
   border-radius: 13px;
   background-color: #fff;
   padding: 10px;
   width: 45%;
}

.card .pd-related {
   display: flex;
   width: 100%;
   flex-direction: column;
}

.pd-related span.related {
   font-size: 1rem;
   font-weight: 600;
   color: #fff;
   text-transform: capitalize;
   margin-bottom: 20px;
}

.pd-related .pd-rela-ul {
   display: flex;
}

.pd-rela-ul .pd-rela-li {
   width: fit-content;
   box-shadow: 28px 0 0 -26px #fff;
}

.pd-rela-ul .pd-rela-li:nth-last-child(-n + 1) {
   box-shadow: none !important;
}

.pd-rela-ul .pd-rela-li img {
   width: 5rem;
}


.card .rating {
   display: flex;
   align-items: center;
   margin-top: 18px;
}

.card .rating i {
   font-size: 18px;
   margin: 0 2px;
   color: #192459;
}

.card .button {
   width: 100%;
   display: flex;
   justify-content: space-around;
   margin-top: 20px;
}

.card .button button {
   background: #192459;
   outline: none;
   border: none;
   color: #fff;
   padding: 8px 22px;
   border-radius: 20px;
   font-size: 14px;
   transition: all 0.3s ease;
   cursor: pointer;
}

.button button:hover {
   background: #192459;
}

.swiper-pagination {
   position: absolute;
}

.swiper-pagination-bullet {
   height: 7px;
   width: 26px;
   border-radius: 25px;
   background: #192459;
}

section#pop-recipe .swiper-button-next,
section#pop-recipe .swiper-button-prev {
   opacity: 0.7;
   color: #ffffff;
   transition: all 0.3s ease;
   margin: 0 5em;
}

section#pop-recipe .swiper-button-next:hover,
section#pop-recipe .swiper-button-prev:hover {
   opacity: 1;
   color: #03A9F4;
}

@media screen and (max-width: 1440px) {
   .swiper {
      width: 960px;
   }

   .swiper-button-next,
   .swiper-button-prev {
      margin: 0;
   }

   .swiper-button-next {
      right: 3vw;
   }

   .swiper-button-prev {
      left: 3vw;
   }
}

@media screen and (max-width: 1024px) {
   .swiper {
      width: 800px;
   }
}

@media screen and (max-width: 960px) {
   .swiper {
      width: 750px;
   }
}

@media screen and (max-width: 820px) {
   .swiper {
      margin-top: 2em;
   }

   section#pop-recipe .swiper-button-next,
   section#pop-recipe .swiper-button-prev {
      margin: 0 2em;
   }
}

@media screen and (max-width: 768px) {
   .swiper {
      width: 520px;
   }
}

@media screen and (max-width: 640px) {

   .swiper {
      width: 280px;
   }
}