.name-in-section {
   width: fit-content;
   padding-bottom: 2rem;
}

.name-in-section h4 {
   letter-spacing: 3px;
}



[ripple] {
   z-index: 1;
   position: relative;
   overflow: hidden;
}

[ripple] .ripple {
   position: relative;
   background: #FFFFFF;
   width: 12px;
   height: 12px;
   border-radius: 100%;
   -webkit-animation: ripple 1.6s;
   animation: ripple 1.6s;
}

@-webkit-keyframes ripple {
   0% {
      transform: scale(1);
      opacity: 0.2;
   }

   100% {
      transform: scale(40);
      opacity: 0;
   }
}

@keyframes ripple {
   0% {
      transform: scale(1);
      opacity: 0.2;
   }

   100% {
      transform: scale(40);
      opacity: 0;
   }
}

.in-tabs {
   position: relative;
   width: 100%;
   height: 60vh;
   box-sizing: border-box;
     /* overflow: hidden; */
   display: flex;
   justify-content: space-between;
}

.tabs-header {
   position: relative;
   width: 30%;
   overflow: hidden;
   padding-left: 2rem;
}

.tabs-header .border {
   position: absolute;
   background-image: url('img/PRODUCT/yellow-line.png');
   background-position: center bottom;
   background-size: cover;
   width: 10px;
   height: auto;
   transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.border2 {
   position: absolute;
   background-image: url('img/PRODUCT/yellow-line.png');
   background-position: center bottom;
   background-size: cover;
   width: 10px;
   height: auto;
   transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.tabs-header ul {
   display: flex;
   flex-direction: column;
   height: 100%;
   list-style: none;
   align-content: flex-start;
   justify-content: flex-start;
}

.tabs-header ul li {
   transition: 0.3s ease;
   width: 100%;
   position: relative;
   padding-left: 1rem;
}

.tabs-header ul li.active {
   height: 18vh;
}

.tabs-header a {
   z-index: 1;
   display: block;
   box-sizing: border-box;
   height: 3em;
   display: flex;
   align-items: center;
   text-align: start;
   color: #FFFFFF;
   font-weight: 500;
   text-decoration: none;
   text-transform: capitalize;
   transition: 0.3s ease;
   font-family: Arial, Helvetica, sans-serif;
}

/* test txt in tab */
.tabs-header a:hover {
   /* color: gold; */
   color: #d3b26d;
}

.in-tab1 {
   position: relative;
   opacity: 0;
   height: 100%;
   align-items: center;
   transition: all 0.3s  cubic-bezier(0.215, 0.61, 0.355, 1);
}

.in-tab1 p {
   text-transform: none;
   font-family: Arial;
   text-align: start;
   padding-left: 1rem;
   transform: translateY(-10px);
   transition: all 0.3s ease;
}

.tabs-header li.active .in-tab1 p {
   transform: translateY(0);
}

.tabs-header li.active .in-tab1 {
   display: flex;
   opacity: 1;
}


.tabs-header li.active a {
   /* color: gold; */
   color: #d3b26d;
   position: absolute;
   width: 100%;
}

/* test txt in tab */
.tabs-nav {
   position: absolute;
   bottom: 50%;
   right: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* width: 100%; */
   padding: 0 10px;
   color: #FFFFFF;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   width:50vw;
}

/* .tabs-nav:before {
   content: "";
   z-index: 1;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   box-shadow: 0 0 20px 10px #4285F4;
 } */

.tabs-nav i {
   position: relative;
   cursor: pointer;
   height: 50px;
   width: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   
   font-family: sans-serif;
   border: solid 1px #fff;
   border-radius: 5px;
}

.tabs-content {
   position: relative;
   /* position: absolute; */
   /* padding: 15px 20px; */
   transition: 0.3s ease;
   /*   overflow: hidden; */
   width: 100%;
   height: 50vh;

   /* border: #fff solid 1px; */
}

.tabs-content .tab {
   width: 100%;
   height: 50vh;
   margin-top: 50px;
   transition: ease 0.3s;
   display: none;
   text-align: center;
   opacity: 0;

   /* border: 1px red solid; */
}

.tabs-content .tab.active {
   display: block;
   opacity: 1;
   margin-top: 0;
   justify-content: center;
   align-items: center;
}

.tabs-content .tab img.show-img-pd-03 {
   transition: all 0.50s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   width: 0%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.tabs-content img.show-img-pd-01,
.tabs-content img.show-img-pd-02 {
   transition: all 0.50s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   transition-delay: 0.2s;
   width: 20vw;
   position: absolute;
   left: 33%;
   opacity : 0;
}

img.show-img-pd-01 {
   transform: rotate(0.25turn);
}

img.show-img-pd-02 {
   transform: rotate(-0.25turn);
}

.tabs-content .tab.active img.show-img-pd-03 {
   width: 40vw;
   opacity: 1;
}

.tabs-content .tab.active img.show-img-pd-01,
.tabs-content .tab.active img.show-img-pd-02 {
   width: 40vw;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   opacity: 1;
}

@media screen and (max-width: 1440px) {
   
   .tabs-content img.show-img-pd-01,
   .tabs-content img.show-img-pd-02 {
      transition: all 0.50s cubic-bezier(0.58, 0.9, 0.5, 1.1);
      transition-delay: 0.2s;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 20vw;
      position: absolute;
      opacity : 0;
   }
   
   img.show-img-pd-01 {
      transform: rotate(0.25turn);
   }
   
   img.show-img-pd-02 {
      transform: rotate(-0.25turn);
   }
   
   .tabs-content .tab.active img.show-img-pd-01,
   .tabs-content .tab.active img.show-img-pd-02 {
      width: 50vw;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      opacity: 1;
   }

   .tabs-content .tab.active img.show-img-pd-03 {
      width: 50vw;
      opacity: 1;
   }
}