:root {
  --white-100: hsl(206, 5%, 100%);
  --white-200: hsl(206, 5%, 90%);
  --white-300: hsl(206, 5%, 80%);
  --white-400: hsl(206, 5%, 65%);
  --white-500: hsl(206, 5%, 45%);

  --black-100: hsl(210, 20%, 10%);
  --black-200: hsl(210, 20%, 8%);
  --black-300: hsl(210, 20%, 6%);
  --black-400: hsl(210, 20%, 4%);
  --black-500: hsl(210, 20%, 1%);
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  overflow: hidden;
}

a,
button {
  cursor: pointer;
  user-select: none;
  border: none;
  outline: none;
  background: none;
}

.hero-slider-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

@media (max-width: 796px) {
  .hero-slider-img {
    object-position: 20%;
  }
}
@media (max-width: 450px) {
  .hero-slider-img {
    height: 379px;
    object-position: 20%;
  }
}
.section {
  margin: 0 auto;
}

.container {
  max-width: 75rem;
  height: auto;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.swiper {
  &-button-next::after,
  &-button-prev::after {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 1rem;
    width: 2rem;
    height: 2rem;
    opacity: 0.75;
    border-radius: 50%;
    color: var(--white-100);
    background: var(--black-300);
  }
}

.swiper-slide{
  border-radius: 20px;
  margin-left: 5px;
  height: 750px;
}

@media (max-width: 572px) {
  .swiper-slide{
    margin-left: 0px;
    height: 550px;
  }
}

@media (max-width: 450px) {
  .swiper-slide{
    margin-left: 0px;
    height: 450px;
  }
}


.heading{
  font-size: 65px;
  font-family: var(--main-font-family);
  font-weight: 700;
  margin: 0;
}
@media (max-width: 1024px) {
  .heading{
    font-size: 46px;
  }
}
.p-text{
  font-size: 18px;
}
.home-btn{
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px solid red;
  border-radius: 20px;
  font-size: 16px;
  text-wrap: nowrap;
  border: 2px solid var(--dark-bg);
  height: max-content;
  font-weight: 500;
}
.home-btn:hover{
  border: 2px solid var(--dark-bg);
  color: #fff;
  background-color: var(--dark-bg);
}

/*-- COMPONENT --*/  
article.card{  
  position: relative;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 1.3rem 2rem;  
  border-radius: 1rem;  
  overflow: hidden;  
  max-width: 350px;
  margin: auto;
}  
article:nth-child(1){  
  background-color: var(--first-color);  
}  
article:nth-child(2){  
  background-color: var(--second-color);  
}  
article:nth-child(3){  
  background-color: var(--third-color);  
}  
article:nth-child(4){  
  background-color: var(--second-color);  
}  
.card__img{  
  height: auto;
  transition: .5s;
  position: relative; 
}   
.card__img img{  
  min-height: 400px;
  object-fit: cover;
}   

.card__name{  
  position: absolute;
  left: -25%;
  top: 0;
  width: 3.5rem;
  height: 100%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  background-color: var(--dark-color);
  color: #333;
  font-weight: bold;
  transition: .5s;
  padding-right: 10px;
  font-weight: 600;
  font-size: larger;
}  
.card__icon{  
  font-size: 1.5rem;  
  color: var(--dark-color);  
}  
.card__icon:hover{  
  color: var(--accent-color);  
}  
.card:hover .card__img{  
  transform: scale(1.1);
  transition: 0.5s;
}
.card__precis{  
  width: 100%;  
  display: flex;  
  justify-content: space-between;  
  flex-direction: column;
  transition: .5s;  
  position: absolute;
  bottom: 0;
  padding: 30px 20px;
  color: #fff;
  line-height:1;
  background: linear-gradient(360deg, rgb(0 0 0 / 70%) 51%, transparent 100%);
}  
/*
.product-line2{
  --reversed-link-gap: min(100%, 1.05em);
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.05em) / 0 1px no-repeat;
    background-position-x: right;
    transition: background-size .5s cubic-bezier(.3, 1, .3, 1);
    letter-spacing: -.05em;
    line-height: 1;
    position: relative;
    word-break: break-word;
    box-sizing: border-box;
    font-weight:700;
    font-style:normal;
}
.product-line2:hover{
  background-position-x: left;
  background-size: 100% 1px;
}
  */
.product-heading{
  position: relative;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--main-font-family);
  width: max-content;
  margin: 0;
}
.product-heading::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  border-radius: 5px;
  height: 0.05em;
  bottom: 4px;
  left: 0;
  background: currentcolor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.card__precis small{
  max-width:275px;
  text-transform: uppercase;
}
.card__precis i{
  position: absolute;
  top: 48%;
  right: 18px;
  font-size: 20px;
}
.card:hover .product-heading::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.card__preci{  
  display: block;  
  text-align: center;  
}  
.card__preci--before{  
  font-size: var(--smaller-font-size);  
  color: var(--accent-color);  
  margin-bottom: .25rem;  
}  
.card__preci--now{  
  font-size: var(--h3-font-size);  
  font-weight: bold;  
}  

.text-red{
  color: #cc3843;
}

.tpproduct__collection-name{
  font-weight: 600;
}
.tpproductitem:after{
  margin-bottom: 0px;
}