﻿@charset "utf-8";
/* CSS Document */
@media all{
  .whats-new-hero-caption *{margin-bottom: 0px;}


  .link-arrow{width:18px;height:2px; margin-left:8px; margin-top:2px; background:currentColor; display:inline-block; transition:all 0.2s ease;}
  .link-arrow::before,
  .link-arrow::after {content:""; position:absolute; top:unset; right:-1px; width:9px; height:2px; border-radius:9999px; background-color:currentColor; transform-origin:calc(100% - 0px) 50%;}  
  .link-arrow::before {transform:rotate(45deg);}  
  .link-arrow::after {transform:rotate(-45deg);}

  :hover .link-arrow{background:currentColor;}
  :hover .link-arrow::before, 
  :hover .link-arrow::after{background:currentColor;}


  .whats-new-hero-caption *
  .news-letter *,
  .nl-right *{margin-bottom:0px;}

  .whats-new-hero{padding:150px 0px 180px 0px; background: var(--NavBG) url('../images/whats-new-hero-bg.svg') no-repeat top center; background-size:cover; }
  .whats-new-hero-caption{row-gap: 1.4rem;}
  .whats-new-hero-caption h1{color:var(--HeroHdClr); font-size:var(--HeadingFive); font-weight:400;}
  .whats-new-hero-caption h2{color:var(--WhiteClr); font-weight:800;}
  .whats-new-hero-caption p{color:var(--WhiteClr); font-weight:400; font-size: var(--Largetxt); max-width: 854px;}

  .wn-icon1,
  .wn-icon2{animation: float 5s infinite ease-in-out;}
  .wn-icon1{width:180px; top:-20%; left:6%;animation-delay: 0s;animation-duration: 6s;transform: translateZ(-2px);}
  .wn-icon2{width:200px; top:2%; right:0%; animation-delay: 1s; animation-duration: 5s;transform: translateZ(-1px);}

  @keyframes float {
    0% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-20px) scale(1.1);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }

  .wn-icon3{top:78%; left: 7%; width: 66px; height: 66px;}
  .wn-icon4{top:-35%; right:30%; width: 66px; height: 66px;}
  .wn-icon5{bottom:-30%; right:15%; width: 66px; height: 66px;}

  .wn-icon3 img,
  .wn-icon4 img,
  .wn-icon5 img{animation: zoomIn 3s infinite ease-in-out;}

  .wn-icon3:after,
  .wn-icon4:after,
  .wn-icon5:after{content: ''; width: 66px; height: 66px; background:#711F1F; border-radius: 10px; position: absolute; left: 0px; transform: rotate(-16deg); animation: halfRotate 3s infinite ease-in-out;
  }

  @keyframes halfRotate {
    0%, 100% {
      transform: rotate(0deg); /* Start and end at original position */
    }
    50% {
      transform: rotate(10deg); /* Rotate halfway */
    }
  }
  @keyframes zoomIn {
    0%, 100% {
      transform: scale(0.95); /* Normal size */
    }
    50% {
      transform: scale(1); /* Zoomed in */
    }
  }
  .product-outer{background:#f3f3f3;}

  .search-bar{border:solid 2px var(--PrimaryClr); border-radius:50px; max-width: 500px; column-gap: 15px; padding:6px 25px 5px 25px; background: var(--WhiteClr); margin: -25px auto 0px auto;}
  .search-submit{background: url('../images/search.svg') no-repeat center; background-size: contain; text-indent: -9999px; width: 30px; height: 30px;}
  .search-field{font-size: var(--Largetxt); color:#343434; width:100%;}

  .search-field::-webkit-input-placeholder {color:#343434;}
  .search-field::-moz-placeholder {color: #343434;}
  .search-field:-ms-input-placeholder {color:#343434;}
  .search-field:-moz-placeholder {color:#343434;}

  .news-letter{background: var(--WhiteClr); border-radius:var(--BrdRadius); /* margin-top: 60px; */ padding:50px 70px 20px 70px; grid-template-columns: 1fr 1fr; column-gap:100px;}
  .nl-right {row-gap:15px;}
  .nl-right p{font-size: 22px;}
  .nl-right .news-field{border: solid 1px #919191;background: #F9F9F9;border-radius: 10px;font-size: 26px;width: 100%;max-width: 480px;padding: 0.5rem 1rem 0.75rem 1rem;}
  .nl-right span{color:#7F7F7F80; margin-top: 30px;}
  .nl-right .btn-primary{border-radius: 10px; margin-top: 30px;}

  .products-listing{margin-top: 90px; display: grid; grid-template-columns:29% 1fr; column-gap:5rem;}

  .product-search{border:solid 2px #B1B1B1; border-radius:6px; column-gap: 15px; padding:6px 15px 5px 15px; }
  .ps-btn{background: url('../images/search.svg') no-repeat center; background-size: contain; text-indent: -9999px; width:26px; height:26px; opacity: 0.4;}
  .ps-field{font-size: 20px; font-weight:400; color:#343434; width:100%;}

  .ps-field::-webkit-input-placeholder {color:#141218; opacity: 0.3;}
  .ps-field::-moz-placeholder {color:#141218; opacity: 0.3;}
  .ps-field:-ms-input-placeholder {color:#141218; opacity: 0.3;}
  .ps-field:-moz-placeholder {color:#141218; opacity: 0.3;}

  .pl-filter-accordian{margin-top:24px;}
  .pl-filter-accordian .accordion-button:focus{box-shadow: none;}
  .pl-filter-accordian .accordion-item{background: transparent; border-color:#E0E0E0;}
  .pl-filter-accordian .accordion-button{background: transparent;color:#242424;font-size:var(--HeadingFive);font-weight: 700;padding: 1.4rem 0px;}
  .pl-filter-accordian .accordion-button:hover{color:#242424;}
  .pl-filter-accordian .accordion-button:not(.collapsed) {color:#242424; background-color: transparent; box-shadow: 0;}
  .pl-filter-accordian .accordion-body, .pl-filter-accordian .accordion-body p{color: var(--BlackClr);}
  .pl-filter-accordian .accordion-button::after{background: url(../images/filter-down-arrow.svg) no-repeat center; background-size: cover; width:18px; height:10px;}
  .pl-filter-accordian .accordion-button:not(.collapsed)::after{background: url(../images/filter-down-arrow.svg) no-repeat center;}
  .pl-filter-accordian .accordion-button:not(.collapsed){box-shadow: none;}

  .pl-filter-accordian ul{list-style: none; padding: 0px; margin: 0px;}
  .pl-filter-accordian ul li{padding:0.48rem 0px;}
  .pl-filter-accordian ul li a{font-size: var(--Largetxt); color:#4b4b4b; transition:all 0.5s ease;}
  .pl-filter-accordian ul li a:hover{color:#6f6f6f; padding-left: 5px;}
  
  .product-list-outer{display: grid; grid-template-columns: 1fr 1fr; column-gap:35px; row-gap: 50px;}
  .product-card figure{padding-top: 70%; overflow: hidden;}
  .product-card figure img{transition: all 0.4s ease-in-out;}
  .product-card:hover figure img{transform: scale(1.2) rotate(-5deg);}

  .product-card{border-radius: 10px; background: var(--WhiteClr); overflow: hidden;}
  .product-card h5{color: var(--WhiteClr); font-weight:700; padding: 30px; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); max-width:60%;}

  .product-meta{padding: 30px;}
  .pmeta-cat span{opacity: 0.5;}
  .pmeta-cat a{color: var(--CatClr);}
  .pmeta-cat a:hover{color: var(--SecondryClr);}

  .product-meta h3 {font-size: 27px; margin: 25px 0px;}
  .product-meta h3 a{color: #333333;}
  .product-meta h3 a:hover{color: var(--SecondryClr);}

  .product-meta .txt-link{color: var(--PrimaryClr);position:relative;}
  .product-meta .txt-link:hover{color: var(--SecondryClr);}
  .product-meta .txt-link:hover .link-arrow{width:25px;}
  
  .products-listing .pagination{margin: 40px 0px; column-gap: 18px;}
  .products-listing .pagination li .page-link{width: 30px; height:30px; line-height: 30px; background: #999999; color: var(--WhiteClr);}
  .products-listing .pagination li.active .page-link,
  .products-listing .pagination li .page-link:hover{background: var(--PrimaryClr);}

  .products-listing .np-arrow{color:#9F9F9F; height: 30px;}
  .products-listing .np-arrow.prev-arrow{transform: rotate(180deg);}
  .products-listing .np-arrow:hover{color: var(--PrimaryClr);}
  .offcanvas.offcanvas-start{max-width: 90%;}


}

@media all and (max-width:1200px){
  .news-letter {padding: 30px; column-gap: 50px;}
}

@media (min-width: 961px) {
  .offcanvas.offcanvas-start{
    width: auto;
    border: 0px;
  }
  .offcanvas {
    transform: none !important;
    visibility: visible !important;
    position: unset;
    background: transparent;
    border: 0;
  }
}

@media all and (max-width:960px){
  .nl-right .news-field{font-size: 20px;}
  .products-listing{grid-template-columns: 1fr; margin-top: 30px;}

  .offcanvas{padding: 1rem;}

}

@media all and (max-width:767px){
  .whats-new-hero-caption h1{font-size: var(--HeadingTwoSml);}
  .news-letter{grid-template-columns: 1fr; row-gap:2rem;}
  .nl-right{text-align: center;}
  .nl-right .news-field{font-size:var(--Bodytext);}
  .nl-right .btn-primary{margin-top: 15px;}
  .nl-right span{margin-top: 0px;}
  
  .product-list-outer{grid-template-columns: 1fr; row-gap: 15px;}
  .products-listing .pagination{justify-content: center!important;}
  .products-listing .pagination li .page-link{line-height: 28px;}
  .product-meta {padding: 15px;}
  .product-meta h3 {font-size: 20px; margin: 20px 0px;}

  .whats-new-hero {padding: 80px 0px 100px 0px;}
  .wn-icon1{width: 100px;}
  .wn-icon2{right:10%;}
  .wn-icon3:after, .wn-icon4:after, .wn-icon5:after {width: 40px; height: 40px;}
  .wn-icon3{top:100%; left: 7%; width:40px; height:40px;}
  .wn-icon4{top:-25%; right:10%; width:40px; height:40px;}
  .wn-icon5{bottom:-10%; right:15%; width:40px; height:40px;}
  .wn-icon3 img,
  .wn-icon4 img,
  .wn-icon5 img{max-height:30px;}

  .search-submit{width: 20px; height: 20px;}
  .nl-right p{font-size: 100%;}

}

