/*---------------------------------------------------------------
  Template Name: Dazzlegold One Page Jewelry HTML Website Template
  Description: Dazzlegold One Page Jewelry HTML Website Template
  Author: Lucid Solutions
  Author URL: https://www.templatemonster.com/store/lucid_solutions/
  Version: 1.0.0
  -----------------------------------------------------------------
  CSS INDEX
  ==================
  1. Basic Styles
  2. Banner Styles
  3. Featured Styles
  4. Advertisment Styles
  5. Category Styles
  6. Recent Added Styles
  7. About Styles
  8. Testimonial Styles
  9. Back to top Styles
----------------------------------------------------------------*/

@import url('dazzlegoldmain.css');

  /* ========================
    Basic Styles
  ===========================*/
  *{
    box-sizing: border-box;
    font-family: var(--SecondaryFont);
  }
  .nav-item .nav-link{
    color: var(--nav-txt);
    text-transform: capitalize;
    font-weight: 600;
  }
  .nav-item.active .nav-link,.nav-item:hover .nav-link, .nav-item:focus .nav-link{
    color: var(--prime-txt) !important;
    font-weight: 600;
  }
  .w-unset{
    width: unset !important;
    max-width: unset !important;
    min-width: unset !important;
  }
  .mode-btn{
    top: 150px;
    right: -5px;
    z-index: 999;
  }
  [data-theme="dazzlegold-dark"] [data-light="false"], [data-theme="dazzlegold-light"] [data-light="true"]{
    display: block;
  }
  [data-theme="dazzlegold-dark"] [data-light="true"], [data-theme="dazzlegold-light"] [data-light="false"]{
    display: none;
  }
  a{
    color: inherit;
    text-decoration: none;
  }
  a:hover{
    color: var(--prime-txt);
    text-decoration: none;
  }
  #btnSwitch{
    min-height: 75px;
    width: 50px !important;
    min-width: unset;
  }
  .btn-close{
    background: unset !important;
  }
  .btn-close::after{
    content: '\f00d';
    font-family: 'FontAwesome';
    color: var(--nav-txt);
    font-size: 25px;
  }
   .heading-divider{
    width: 400px;
    max-width: 100%;
    margin: auto;
   }
   .mxw-1040{
    max-width: 1040px;
   }
   .mxw-920{
    max-width: 920px;
   }
   .mxw-768{
    max-width: 768px;
   }
   .mh-450{
    min-height: 450px;
   }
   ::placeholder{
    color: var(--input-txt) !important;
    font-weight: 500 !important;
   }
   input, textarea, select{
    color: var(--input-txt) !important;
    font-weight: 500 !important;
   }
   .error:not(.form-control):not(.form-check-input):not(.form-select){
    color: rgb(255, 28, 28);
    font-size: var(--fs-10);
    padding: 3px 5px;
    margin: 5px 0 0 0;
    width: 100%;
    text-transform: capitalize;
    font-family: var(--Primary-font);
   }
   #newsform .error:not(.form-control):not(.form-check-input):not(.form-select){
    position: absolute;
    top: 90%;
    left: 0;
   }
   #newsform input{
    position: relative;
   }
   #newsform .input-group, #newsform .form-check{
    max-width:500px;
   }
   @media(max-width:767px){
   .newsletter .removeborder{
    border: none !important;
   }
  }
/* =============================
    Banner Styles
===============================*/
  .banner1{
    background:linear-gradient(121deg, rgba(var(--prime-rgb), 1), rgba(var(--second-rgb), 0.1)), url('../../assets/images/banner.webp');
  }
  .banner2{
    background: linear-gradient(121deg, rgba(var(--prime-rgb), 1), rgba(var(--second-rgb), 0.1)), url('../../assets/images/banner2.webp');
  }
  .banner3{
    background: linear-gradient(121deg, rgba(var(--prime-rgb), 1), rgba(var(--second-rgb), 0.1)), url('../../assets/images/banner3.webp');
  }
  .banner{
    background-size: cover;
    min-height: 700px;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .banner-content{
    max-width: 500px;
  }
  .splide__arrow {
    background-color: unset;
    box-shadow: none !important;
  }
  .splide__arrow--prev svg{
    display: none;
    border: 0px !important;
  
  }
  .splide__arrow--prev::after{
    content:'\f137';
    font-family: 'FontAwesome';
    font-size: 40px;
    color: var(--banner-txt);
  }
  .splide__arrow--next::after{
    content:'\f138';
    font-family: 'FontAwesome';
    font-size: 40px;
    color: var(--banner-txt);
  }
  @media(max-width:800px){
    .banner{
      min-height: 500px;
    }
    .splide__arrow--prev{
      top: 95%;
      left: calc(50% - 40px);
    }
    .splide__arrow--next{
      top: 95%;
      right: calc(50% - 40px);
    }
  }
/* =============
  Featured Styles
=================*/

  .feat-prodbox {
    -webkit-mask-image: url('../../assets/images/polygon.png');
    mask-image: url('../../assets/images/polygon.png');
    mask-repeat: no-repeat;    
    mask-size: cover;
  }
  .feat-prodbox img{
    width: 100%;
    object-fit: cover;
  }
/* ==========
 Advertisment Styles
 ============*/
  .cust_ad-1{
    background:linear-gradient(100deg, rgba(var(--dark-rgb), 1), rgba(var(--dark-rgb), 0.2)), url('../../assets/images/ad1.webp');
  }
  .cust_ad-2{
    background:linear-gradient(100deg, rgba(var(--dark-rgb), 1), rgba(var(--dark-rgb), 0.2)), url('../../assets/images/ad2.webp');
  }
  .ad-3{
    background:linear-gradient(100deg, rgba(var(--dark-rgb), 1), rgba(var(--dark-rgb), 0.2)), url('../../assets/images/ad3.webp');
  }
  .cust_admain{
    min-height: 550px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .ad-content{
    max-width: 350px;
  }

/* =============
 Category Styles
=============*/
  .category-card{
    border-radius: 150px 0 150px 0  !important;
    background-color: var(--card-bg);
  }
  .category-card2{
    border-radius: 0 150px 0 150px !important;
  }
  .category-card img{
    border-radius: 150px 0 0 0  !important;
  }
  .category-card2 img{
    border-radius: 0 150px 0 0 !important;
  }
  .catcard-img img{
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .product-modal{
    min-height: 500px;
  }
  .slimScrollDiv, #productcat-card{
    height: 450px !important;
  }
/* =============
  Recent Added Styles
================*/
  .recent-img{
    background: url('../../assets/images/recentbg.png') no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 380px;
      background-position: center;
  }

  .recent-img img{
    width: 240px;
    border-radius: 50%;

  }
  @media(max-width:767px){
    .recent-img{
      height: 200px;
    }
    .recent-img img{
      width: 150px;
      max-width: 70%;
      border-radius: 50%;
    }
  }

/* =============
  About Styles
================*/
  .abt-img .lg-img{
    height: 620px;
    object-fit: cover;
  }
  .abt-img .sm-img{
    height: 300px;
    object-fit: cover;
  }
  .counter-box{
    min-width: 350px;
    text-align: center;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
/* =============
  Testimonial Styles
================*/
  #testimonialslide {
    width: 100%;
  }
  #testimonialslide .splide__slide img{
    width: 75px;
    height: 75px;
  }

/* ==================
  Back to top Styles
================== */

#backtotop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 7px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#backtotop:hover {
  cursor: pointer;
}
#backtotop.show {
  opacity: 1;
  visibility: visible;
}