@charset "UTF-8";

@import url("fontawesome.min.css");

/*

  Template Name: VGOK-Marketplace_classified

  ----------------------------

  [Table of contents CSS] 

  ----------------------------



    1. Base CSS

    2. Header css

    3. Slider css

    4. Banner css 

    5. Product card css 

    6. Categories css

    7. Shipping css

    8. Blog css

    9. Testimonial css

    10. Brand logo css

    11. Accordion css

    12. Footer css 

    13. Quickview css

    14. Small Product css

    15. Single Product css 

    16. Product details css 

    17. Shop page css 

    18. Search filter css

    19. Privacy policy css

    20. Preloader css 

    21. Portfolio css

    22. Newsletter css 

    23. Newsletter popup css

    24. My account page css 

    25. Login page css

    26. Faq page css 

    27. Counterup css here

    28. Contact page css

    29. Compare page css 

    30. Checkout Page Css

    31. Cart page css

    32. Breadcrumb css 

    33. Blog details css

    34. About page css

    35. Error 404 page css 



*/





*,

*::after,

*::before {

  box-sizing: border-box;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: "Public Sans", sans-serif;

  color: #333333;

}



/*=======================================================================

[01] comman css

=========================================================================*/

.text-color {

  color: var(--primary);

}



.text-colori {

  color: var(--primary) !important;

}

.text-black-ligh{

  color: #333333;

}



.bg-color {

  background-color: var(--primary);

}



.border-radius-6 {

  border-radius: 6px;

}



.border-radius-12 {

  border-radius: 12px;

}

.z-1{

  z-index: 1;

}

.z-2{

  z-index: 2;

}

.z-3{

  z-index: 3;

}

.z-4{

  z-index: 4;

}

.z-5{

  z-index: 5;

}



/*=======================================================================

[01] Base CSS

=========================================================================*/



/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Open+Sans:wght@300..800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Public+Sans:wght@100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@100..900&family=Open+Sans:wght@300..800&family=Public+Sans:wght@100..900&display=swap');

:root {

  --primary: #99D52C;

  --primary-light: #E9FFC2;

  --primary-secondary: #0E235B;

  --secondary: #92C639;

  --secondary-hover: rgb(244, 165, 28, 0.8);

  --black-light: #242424;

  --black-light-100: #333333;



  --bs-offcanvas-width: 350px !important;

  --primary-border: #ADADAD;

  --border-1: #CCCCCC;

  --backdrop-filter-box: blur(54.400001525878906px);

  --gradiant-1: linear-gradient(92.76deg, #2EC5E6 2.63%, #8AE62E 89.72%);

  --gradiant-11: linear-gradient(40deg, #2EC5E6 2.63%, #8AE62E 89.72%);

  --gradiant-2: linear-gradient(108.8deg, rgba(153, 213, 44, 0.8) -2.54%, #EDE9FE 92.33%);

  --text-gradient: linear-gradient(90deg, #2EC5E6, #8AE62E);

  --black: #000000;

  --white: #fff;



  --primary-gradient: linear-gradient(92.76deg, #2EC5E6 2.63%, #8AE62E 89.72%);

  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);

  --accent-color: #99D52C;

  --glow-color: #9ad52c4b;

}

@media (min-width: 1199px) {

  .container, .container-lg, .container-md, .container-sm, .container-xl {

      max-width: 1200px;

  }

}
  /* font-family: "Bebas Neue", sans-serif;
font-family: "Public Sans", sans-serif;
 font-family: "Open Sans", sans-serif;
 font-family: "Montserrat", sans-serif; */

.font-style-big{
  font-family: "Bebas Neue", sans-serif;
} 
.font-style-1 {

  font-family: "Open Sans", sans-serif;

}



.font-style-2 {

  font-family: "Public Sans", sans-serif;

}

.bg-theme{

  background: var(--primary);

}

.fs-11 {

  font-size: 12px;

}



.fs-12 {

  font-size: 12px;

}



.fs-14 {

  font-size: 14px;

}



.fs-15 {

  font-size: 15px;

}



.fs-16 {

  font-size: 16px;

}



.fs-17 {

  font-size: 17px;

}



.fs-18 {

  font-size: 18px;

}



.fs-19 {

  font-size: 19px;

}



.fs-20 {

  font-size: 20px;

}



.fs-21 {

  font-size: 21px;

}



.fs-22 {

  font-size: 22px;

}



.fs-23 {

  font-size: 23px;

}



.fs-24 {

  font-size: 24px;

}



.fs-25 {

  font-size: 25px;

}



.fs-26 {

  font-size: 26px;

}



.fs-27 {

  font-size: 27px;

}



.fs-28 {

  font-size: 28px;

}



.fs-29 {

  font-size: 29px;

}



.fs-30 {

  font-size: 30px;

}



.fs-32 {

  font-size: 32px;

}

.fs-36 {

  font-size: 36px;

}



.fs-38 {

  font-size: 38px;

}



.fs-48 {

  font-size: 48px;

}



.fs-56 {

  font-size: 56px;

}



.fs-75 {

  font-size: 75px;

}



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

  .fs-11 {

    font-size: clamp(11px, 1.00vw, 11px);

  }



  .fs-12 {

    font-size: clamp(12px, 1.01vw, 12px);

  }



  .fs-13 {

    font-size: clamp(12px, 1.02vw, 13px);

  }



  .fs-14 {

    font-size: clamp(12px, 1.03vw, 14px);

  }



  .fs-15 {

    font-size: clamp(12px, 1.04vw, 15px);

  }



  .fs-16 {

    font-size: clamp(13px, 1.05vw, 16px);

  }



  .fs-17 {

    font-size: clamp(13px, 1.06vw, 17px);

  }



  .fs-18 {

    font-size: clamp(14px, 1.08vw, 18px);

  }



  .fs-19 {

    font-size: clamp(14px, 1.1vw, 19px);

  }



  .fs-20 {

    font-size: clamp(15px, 1.2vw, 20px);

  }



  .fs-21 {

    font-size: clamp(15px, 1.3vw, 21px);

  }



  .fs-22 {

    font-size: clamp(16px, 1.4vw, 22px);

  }



  .fs-23 {

    font-size: clamp(17px, 1.5vw, 23px);

  }



  .fs-24 {

    font-size: clamp(17px, 1.6vw, 24px);

  }



  .fs-25 {

    font-size: clamp(17px, 1.7vw, 25px);

  }



  .fs-26 {

    font-size: clamp(18px, 1.8vw, 26px);

  }



  .fs-27 {

    font-size: clamp(18px, 1.9vw, 27px);

  }



  .fs-28 {

    font-size: clamp(19px, 2vw, 28px);

  }



  .fs-29 {

    font-size: clamp(19px, 2.1vw, 29px);

  }



  .fs-30 {

    font-size: clamp(20px, 2.2vw, 30px);

  }



  .fs-32 {

    font-size: clamp(20px, 2.2vw, 32px);

  }



  .fs-36 {

    font-size: clamp(20px, 2.2vw, 36px);

  }



  .fs-38 {

    font-size: clamp(20px, 2.2vw, 38px);

  }



  .fs-48 {

    font-size: clamp(20px, 2.2vw, 48px);

  }



  .fs-56 {

    font-size: clamp(22px, 2.2vw, 56px);

  }



  .fs-75 {

    font-size: clamp(37px, 4.2vw, 75px);

  }

}



.fw-100 {

  font-weight: 100;

}



.fw-200 {

  font-weight: 2000;

}



.fw-300 {

  font-weight: 300;

}



.fw-400 {

  font-weight: 400;

}



.fw-500 {

  font-weight: 500;

}



.fw-600 {

  font-weight: 600;

}



.fw-700 {

  font-weight: 700;

}



.fw-800 {

  font-weight: 800;

}



.fw-900 {

  font-weight: 900;

}







.fw-100i {

  font-weight: 100 !important;

}



.fw-200i {

  font-weight: 2000 !important;

  ;

}



.fw-300i {

  font-weight: 300 !important;

}



.fw-400i {

  font-weight: 400 !important;

}



.fw-500i {

  font-weight: 500 !important;

}



.fw-600i {

  font-weight: 600 !important;

}



.fw-700i {

  font-weight: 700 !important;

}



.fw-800i {

  font-weight: 800 !important;

}



.fw-900i {

  font-weight: 900 !important;

}



ul {

  list-style-type: none !important;

  padding-left: 0px !important;

}



/* color variant */

.black-light-100 {

  color: var(--black-light-100);

}



/*=======================================================================

[02] Header css

=========================================================================*/

.logo {

  position: relative;

  width: 4.5em;

  height: 0;

}



.logo .wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 0;

  padding-bottom: 100%;

  border-radius: 100%;

}



.logo img {

  width: 100%;

  padding: 0.5em;

}



/*=======================================================================

[03] Slider css (Mobile Menu)

=========================================================================*/

.desktop-view.navbar-light .navbar-nav .nav-link {

  color: var(--white);

}



.desktop-view.navbar-light .navbar-nav .nav-link.active {

  color: var(--primary);

}
.nav-ul-mobile .nav-mobile-item.active {
  border-bottom: 1px solid var(--primary);
}
a.mobile-menu-link.active{
  color: var(--primary);
}


.desktop-view.navbar-light .navbar-nav .nav-item.active {

  border-bottom: 1px solid var(--gradiant-1);

}



.desktop-view.navbar-light .navbar-nav .nav-item.active::before {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background: var(--gradiant-1);

}



.logo-site {

  transition: all 200ms ease-in-out !important;

  -webkit-transition: all 200ms ease-in-out !important;

}



.logo-site img {

  transition: all 200ms ease-in-out;

}



/* 

      ======================================

               1.1 Toggle button  

      ======================================

*/



.mobile-button {

  position: relative;

  width: 26px;

  height: 26px;

  background-color: transparent;

  cursor: pointer;

  display: block;

}



.mobile-button span {

  position: absolute;

  width: 100%;

  height: 2px;

  left: 0;

  top: 12px;

  background-color: var(--secondary);

  border-radius: 10px;

}



.mobile-button::before {

  content: "";

  position: absolute;

  top: 5px;

  height: 2px;

  width: 100%;

  left: 0;

  background-color: var(--secondary);

  border-radius: 10px;

}



.mobile-button::after {

  content: "";

  position: absolute;

  bottom: 5px;

  height: 2px;

  width: 100%;

  left: 0;

  background-color: var(--secondary);

  border-radius: 10px;

}



.offcanvas-start {

  width: 250px;

  /* Sidebar width */

}



.offcanvas.offcanvas-start {

  top: 0;

  left: 0;

  width: var(--bs-offcanvas-width);

}



.canvas-mobile .btn-close-mobile {

  /* position: absolute;

   right: 20px;

   top: 20px;

   cursor: pointer;

   color: var(--white);

   z-index: 100; */

}



.logo-site {

  background-color: var(--black);

}



.form-search {

  position: relative;

}



.form-search .button-submit {

  display: flex;

  align-items: center;

  position: absolute;

  right: 15px;

  top: 50%;

  transform: translateY(-50%);

  border: none;

  background-color: transparent;

}



.form-search .button-submit i {

  color: var(--black);

  font-size: 20px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



.form-search .button-submit:hover i {

  color: var(--primary);

}



.canvas-mobile .canvas-content {

  min-width: 100%;

  max-width: min(90%, 320px);

  grid-auto-rows: minmax(0, 1fr) auto;

  isolation: isolate;

  height: 100%;

  width: 100%;

  display: grid;

  max-height: calc(100% - 67px);

}



.canvas-mobile .mobile-menu-body {

  padding-right: 25px;

  padding-left: 25px;

  padding-bottom: 20px;

  overscroll-behavior-y: auto;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  justify-content: space-between;



}



.mobile-search {

  outline: 0;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  width: 100%;

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  border-radius: 10px;

  color: var(--black-light);

  overflow: hidden;

  border: 1px solid var(--primary-border);

  padding: 12px 10px 12px 14px;

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



.nav-ul-mobile .sub-nav-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 32px;

  line-height: 32px;

  /* color: var(--dark); */

}



.nav-ul-mobile .nav-mobile-item {

  border-bottom: 1px solid var(--primary-border);

}

.nav-ul-mobile .nav-mobile-item.active {

 border-bottom: 1px solid var(--primary-border);

}

.nav-ul-mobile .nav-mobile-item.active .mobile-menu-link {

  color: var(--primary);

}



.nav-ul-mobile .nav-mobile-item {

  padding: 2px 0px;

}



.nav-ul-mobile .btn-open-sub {

  position: relative;

  width: 20px;

  height: 30px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.nav-ul-mobile .btn-open-sub::before {

  width: 2px;

  height: 12px;

}



.nav-ul-mobile .nav-mobile-item .mobile-menu-link:not(.collapsed) .btn-open-sub::before {

  transform: rotate(90deg);

}



.sub-nav-menu .sub-nav-link:not(.collapsed) .btn-open-sub::before {

  transform: rotate(90deg);



}



.nav-ul-mobile .btn-open-sub::before {

  content: "";

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: var(--black-light);

  transition: 0.4s ease 0.1s;

  margin: auto;

}



.nav-ul-mobile .btn-open-sub::after {

  width: 12px;

  height: 2px;

}



.nav-ul-mobile .btn-open-sub:after,

.nav-ul-mobile .btn-open-sub::before {

  content: "";

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: var(--black-light);

  transition: 0.4s ease 0.1s;

  margin: auto;

}



.nav-mobile-item a {

  text-decoration: none;

  color: var(--black-light);

}



.mobile-info li p a {

  -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  text-decoration: none;

  cursor: pointer;

  display: inline-block;

  color: var(--black-light);

}



@media (max-width: 991px) {

  .canvas-mobile {

    max-width: 320px;

  }

}





/*=======================================================================

[01.2] Banner css

=========================================================================*/





.hero-section {

      position: relative;

      height: 70vh;

      color: white;

    }



@media screen and (min-width: 1024px) {

      .hero-section {

        height: 80vh;

      }

      

    }

    @media screen and (min-width: 576px) and (max-width: 991px) {
      .hero-section {
        height: 100vh;
      }
    }



    .hero-section .swiper {

      height: 100%;

    }



    



    .hero-section .swiper-slide {

      background-size: cover;

      background-position: center;

    }



    .hero-overlay {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: rgba(0, 0, 0, 0.5);

      z-index: 1;

    }



    .hero-content {

      position: absolute;

      top: 45%;

      left: 50%;

      transform: translate(-50%, -30%);

      text-align: center;

      z-index: 4;

      width: 100%;

      max-width: 900px;

    }



    .hero-content h1 {

      /* font-size: 3rem;

      font-weight: 700; */

      background: linear-gradient(to right, #00c6ff, #00ff84);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

    }

    @media screen and (min-width: 992px) {

        .d-lg-contents {

            display: contents;

        }

    }

    .search-box {

      background: rgba(20, 20, 30, 0.9);

      border-radius: 10px;

      padding: 8px;

      display: flex;

      align-items: center;

      margin-top: 20px;

    }



    .search-box select{

        border: none;

      background: transparent;

      color: white;

      padding: 8px;



      outline: none;

    } 

    .search-box input {

      border: none;

      background: transparent;

      color: white;

      padding: 8px;

      flex: 1;

      outline: none;

    }



    .search-box input::placeholder {

      color: #bbb;

    }



    .search-btn {

      background: #8dc63f;

      border: none;

      color: white;

      padding: 10px 20px;

      border-radius: 8px;

      font-weight: 600;

      cursor: pointer;

    }



/*=======================================================================

[04] Banner css

=========================================================================*/





/* comming soon */

/*=======================================================================

[05] Header css

=========================================================================*/



/*=======================================================================

[02] support

=========================================================================*/

/* Support Section */

.support-box {

  background: #e9ffcf;

  border-radius: 20px;

  padding: 40px;

  margin-bottom: -50px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  z-index: 2;

  position: relative;

}



.support-box h3 {

  font-weight: 700;

}



.support-btn {

  border-radius: 12px;

  padding: 10px 20px;

  font-weight: 500;

  margin: 5px;

}



/*=======================================================================

[02] footer

=========================================================================*/





/* Footer */

.footer {

  background: #111;

  color: #ddd;

  padding: 100px 0 20px;

}



.footer h5 {

  color: #fff;

  margin-bottom: 20px;

  font-weight: 600;

}



.footer a {

  color: var(--white);

  text-decoration: none;

  display: block;

  margin-bottom: 10px;

}



.footer a:hover {

  /* color: var(--text-gradient); */

  background: var(--text-gradient);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;



}



.newsletter-input {

  background: #444;

  border: none;

  color: #fff;

  padding: 10px;

  width: 100%;

}



.newsletter-btn {

  background: #a9ff4b;

  border: none;

  padding: 10px 15px;

}



.social-icons a {

  color: #111;

  background: #a9ff4b;

  width: 40px;

  height: 40px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  margin-right: 10px;

  font-size: 18px;

}



.social-icons a:hover {

  color: var(--black);

  background: var(--gradiant-11);

}



.footer-bottom {

  /* border-top: 1px solid #333; */

  text-align: center;

  color: var(--white);

}



/* bottom footer */

.bottom-footer {

  background: #242424;

}



/* wave */

/* .main-wave {

  display: inline;

  margin: 0 35px;

} */



.footer .text-border {

  display: inline-block;

  position: relative;

  text-decoration: none;

  color: #000000;

  transition: all ease 0.5s;

}



.footer .text-border::after {

  width: 100%;

  height: 100%;

  background: url(../images/wave/wave.svg);

  background-size: 15px;

  background-position: 0px;

  animation: waveline 6s linear infinite;

}



@keyframes waveline {

  to {

    background-position: -150px;

  }

}





/* search box */

.header__select--categories {

  padding: 0 0px 0 6px;

  position: relative;

}

.header__select--categories .nice-select.ignore{

  width: 100%;

}

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

  .header__select--categories{

    width: 100%;

  }

  .search-box .m-view{ 

    width: 100%;

    text-align: start;

  }

  .search-btn{

    width: 100%;

  }

  .header__select--categories::after{

    display: none;

  }

}

/* .header__select--categories.select::before {

  border-bottom: 2px solid #444444;

  border-right: 2px solid #444444;

  content: "";

  display: block;

  height: 9px;

  margin-top: -4px;

  pointer-events: none;

  position: absolute;

  right: 18px;

  top: 50%;

  width: 9px;

  transform-origin: 100% 66%;

  transform: rotate(45deg);

  opacity: 0.7;

} */



/* .header__select--inner{

  position: absolute;

    content: "";

    background: #BFBFBF;

    width: 1px;

    height: 100%;

    right: 0;

    top: 50%;

    transform: translatey(-50%);

} */

.header__select--categories::after {

  position: absolute;

  content: "";

  background: #BFBFBF;

  width: 1px;

  height: 100%;

  right: 0;

  top: 50%;

  transform: translatey(-50%);

}







/* category-card */

.categories-container {

  z-index: 2;

  position: relative;

}



.cat-card {

  aspect-ratio: 1 / 1;

  background-color: rgb(242 243 245 / 50%);

  backdrop-filter: blur(10px);

}



.cat-card:hover {

  box-shadow: 0px 6px 0px 0px rgb(87, 157, 218);

  -webkit-box-shadow: 0px 6px 0px 0px rgb(87, 157, 218);

  -moz-box-shadow: 0px 6px 0px 0px rgb(87, 157, 218);

  transition: all ease 0.3s;

}



.cat-card:hover .category-card svg path {

  fill: var(--primary);

  transition: all ease 0.3s;

}



@media screen and (min-width: 1024px) {

  .mt-overlay-70 {

    margin-top: -90px !important;

  }

}



/* category-btn-list */

.category-btn-list {

  list-style-type: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: -ms-flexbox;
}



.category-btn-list .category-btn:hover {

  background-color: var(--primary);

  border: 1px solid var(--primary);

  color: var(--white);

}



.category-btn-list .category-btn {

  background-color: #F2F3F5;
  color: var(--black-light-100);
  border: 1px solid #8FA0EB;
  padding: 10px 23px;
  border-radius: 50px;
  /* margin-right: 10px;
  margin-bottom: 10px; */
  display: flex;
  align-items: center;
}



.category-btn-list .category-btn.active {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
}







@media screen and (min-width: 768px) {

  .col-desktop {

    width: 20%;

  }

}



.ratio-box-img {

  position: relative;

  width: 100%;

  /* max-width: 364px; */

  /* optional limit */

  padding-bottom: 100%;
  /* padding-bottom: 47.8%; */

  /* keeps 364x174 ratio */

  background: #f0f0f0;

  /* just for demo */

  z-index: 1;

    border-radius: 9px;

}



.ratio-box-img img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  /* or contain */

  border-radius: 9px;

}



.cardbox-card:hover {

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

  transition: transform 0.2s ease;

}



.cardbox-card {

  border-radius: 12px;

  overflow: hidden;

  /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */

  transition: transform 0.2s ease;

  padding: 10px;

}



.cardbox-card:hover {

  transform: translateY(-5px);

}

.cardbox-card {

  /* position: relative;

  background-color: white;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.5); 

  text-align: center;

  transition: all 0.3s ease; */

}



.cardbox-card:hover::before {

      content: '';

    position: absolute;

    top: -65px;

    right: -85px;

    width: 181px;

    height: 181px;

    border-radius: 50%;

    box-shadow: 0 0 186.6px 0px rgb(153 213 44 / 0.8);

    /* box-shadow: 0 0 186.6px 0px rgba(0, 255, 0, 0.8); */

    transition: all 0.3s ease;

    backdrop-filter: blur(100px);

    background: linear-gradient(to bottom, rgb(153 213 44 / 21%), rgb(153 213 44 / 21%));

    /* background: linear-gradient(to bottom, rgb(0 255 0 / 21%), rgba(0, 255, 0, 21%)); */

  /* content: '';

  position: absolute;

  top: -10px;

  right: -10px;

  width: 60px;

  height: 60px;

  background: rgba(0, 255, 0, 0.6);

  border-radius: 50%;

  box-shadow: 0 0 30px rgba(0, 255, 0, 0.8); 

  transition: all 0.3s ease; */

}

.cardbox-card:hover::after {

      content: '';

    position: absolute;

    top: -65px;

    left: -85px;

    width: 181px;

    height: 181px;

    /* background: rgba(0, 255, 0, 0.6); */

    /* background: rgba(0, 255, 0, 0.6); */

    border-radius: 50%;

    box-shadow: 0 0 186.6px 0px rgb(153 213 44 / 0.8);

    /* box-shadow: 0 0 186.6px 0px rgba(0, 255, 0, 0.8); */

    transition: all 0.3s ease;

    backdrop-filter: blur(100px);

    background: linear-gradient(to bottom, rgb(153 213 44 / 21%), rgb(153 213 44 / 21%));

    /* background: linear-gradient(to bottom, rgb(0 255 0 / 21%), rgba(0, 255, 0, 21%)); */

  /* content: '';

  position: absolute;+

  top: -10px;

  right: -10px;

  width: 60px;

  height: 60px;

  background: rgba(0, 255, 0, 0.6);

  border-radius: 50%;

  box-shadow: 0 0 30px rgba(0, 255, 0, 0.8); 

  transition: all 0.3s ease; */

}



.cardbox-card:hover::before {

  /* width: 80px; 

  height: 80px;

  box-shadow: 0 0 50px rgba(0, 255, 0, 1); */

}





/* .cardbox-card::after{

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

} */



.cardbox-card img {

  /* width: 100%;

      height: 180px;

      object-fit: cover; */

}



.badge-art {

  background-color: rgb(153, 213, 44, 10%);

  color: #99D52C;

  border-radius: 50px;

  padding: 1px 10px;

  border: 1px solid #99D52C;

}



.price {

  color: #304110;

}



.like-view-count {

  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 0.9rem;

  color: #6c757d;

  background: #99D52C33;

  padding: 6px 10px;

  border-radius: 50px;



}



.like-view-count:hover {

  color: var(--primary);

}

.like-view-count.active i{
  color: var(--primary);
}

.btn-view {

  background-color: #8dc63f;

  /* color: white; */

  border-radius: 8px;

  padding: 6px 16px;

}



.btn-view:hover {

  color: white;

  background-color: #76a82f;

}

.btn-view-primary{

    background-color: var(--primary);

  border-radius: 8px;

  padding: 6px 16px;

}

.btn-view-primary:hover {
  color: white;
  background-color: #76a82f;
}

.table-action-btn{
  background-color: var(--primary);
  border-radius: 8px;
  padding: 6px 8px;
}
.table-action-btn:hover{
  color: white;
  background-color: #76a82f;
}


.view-more {

  text-decoration: none;

  color: #0d6efd;

  float: right;

}







/* artist */

.artist-section {

  padding: 60px 0;

}



.artist-card {

  text-align: center;

}



.artist-card a:hover .artist-name{

  color: var(--primary);

}



.artist-img {

  /* width: 100%; */

  /* height: 100%;  */

  aspect-ratio: 1/1;

  object-fit: cover;

  border-radius: 50%;

  border: 1px solid var(--primary-light);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  transition: transform 0.3s ease;

}

@media screen and (min-width: 768px) {

  .artist-img {

    width: 160px;

    height: 160px;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid var(--primary-light);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    transition: transform 0.3s ease;

  }

}



.artist-img:hover {

  transform: scale(1.05);

  border-color: var(--primary);

}



.artist-name {

  margin-top: 15px;

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--black-light-100);

}



.section-title {

  font-size: 1.5rem;

  font-weight: 700;

  margin-bottom: 40px;

  color: var(--black-light);

}





/* how it work */



.work-card {

  border-radius: 1rem;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  transition: transform 0.2s ease;

  background: #fff;

  position: relative;

}





.work-card {

  /* position: relative;

  background-color: white;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  text-align: center; */

  transition: all 0.3s ease;

  overflow: hidden;

}



.corner-effect {

  position: absolute;

  top: 0;

  right: 0;

  width: 0;

  height: 0;

  background-color: rgba(0, 255, 0, 0.2);

  border-top-right-radius: 50%;

  transition: all 0.5s ease;

}



.work-card:hover .corner-effect {

  width: 100px;

  height: 100px; 

  border-radius: 100%;

  background-color: #8AE62E4D; 

  right: -30px;

  top: -30px;

}





.work-card:hover {

  transform: translateY(-5px);

}

/* .work-card::before{

  content: '';

  width: 100px;

  height: 100px;

  border-radius: 100%;

  background: var(--primary);

  position: absolute;

  transition: all 6s ease-out;

}

.work-card::before{

  content: '';

  width: 100px;

  height: 100px;

  border-radius: 100%;

  background: var(--primary);

  position: absolute;

  right: 0px;

  top: 0;

  transition: all 6s ease-out;

} */

.icon-circle {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #eefcf2;

  color: var(--primary);

  font-size: 1.5rem;

  margin-bottom: 1rem;

}









/* testimonial */

.bg-testimonial {

  background: linear-gradient(150deg, rgba(153, 213, 44, 0.8) 25%, #EDE9FE 75%);

}



.testimonial-card {

  background: #fff;

  border-radius: 1rem;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  padding: 2rem;

}



.testimonial-card img {

  width: 70px;

  height: 70px;

  border-radius: 50%;

  margin-bottom: 1rem;

}



.testimonial-card h5 {

  margin-bottom: 0.3rem;

}



.stars {

  color: var(--primary);

  margin-bottom: 1rem;

}



.location-badge {

  display: inline-block;

  background: var(--primary);

  color: #fff;

  font-size: 0.8rem;

  padding: 0.3rem 1rem;

  border-radius: 20px;

  margin-top: 1rem;

}

.testimonialSwiper .swiper-pagination-bullet{

  width: 20px;

  border-radius: 50px;

  background-color: rgba(0, 0, 0, 0.302);

}

.testimonialSwiper .swiper-pagination-bullet-active{

  width: 30px;

  background-color: var(--primary);

}





/* .nice-select */

.nice-select.ignore{

  background-color: transparent;

  border: 0px;

  min-width: 162px;

  padding-left: 5px;

  padding-right: 24px;

}

.nice-select .ignore .list{

  background-color: #000000;

}
.nice-select.open .list{
  width: 100%;
}
/* .nice-select .option:hover, 

.nice-select .option.focus, 

.nice-select .option.selected.focus */

.nice-select.ignore .option:hover {

  background-color: #000;

  color: #fff;

}

.nice-select.ignore .option.focus, 

.nice-select.ignore .option.selected.focus{

  background-color: var(--primary);

}

.nice-select.ignore .option{

  color: #000;

}

.box .nice-select:after{

  width: 9px;    

  height: 9px;

  right: 17px;

}









/* filter */



 .brand-list {

    display: none;

    padding-top: 0.5rem;

  }



  .filter-section.active .brand-list {

    display: block;

  }

  .toggle-more {

    color: var(--primary);

    font-size: 0.875rem;

    cursor: pointer;

    margin-top: 0.5rem;

  }



.filter-box {

  border: 1px solid #D8D8D8;

  border-radius: 16px;

  box-shadow: 0px 1.83px 5.5px 0px #0000000F;

}

.filter-box .filter-section:first-child {
  border-top: none;
}

.filter-box .filter-section:last-child {

  padding-bottom: 0px;

}

.filter-section {

    border-top: 1px solid #D8D8D8;

    /* border-top: 1px solid #BABABA; */

    padding: 10px 0px;

}



.layout-switch {

  width: 48px;

  height: 48px;

}

.layout-switch{

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease-in-out;

  cursor: pointer;

}

.layout-switch .item{

    display: grid;

    gap: 2px;

}

.layout-switch.layout-switch-h .item{

    grid-template-columns: 1fr;

}

.layout-icon-s2.layout-switch-h .item{

    grid-template-columns: 1fr 1fr;

}

.layout-icon-s3.layout-switch-h .item{

    grid-template-columns: 1fr 1fr 1fr;

}

.layout-icon-s4.layout-switch-h .item{

    grid-template-columns: repeat(4, 1fr);

}

.layout-switch .item span {

    display: inline-block;

    width: 18px;

    height: 3px;

    border-radius: 2px;

    background-color: #0003;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}

.layout-switch.layout-switch-h .item span{

  display: inline-block;

    width: 3px;

    height: 18px;

    border-radius: 2px;

    background-color: #0003;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}

.layout-switch.active .item span{

  background-color: #000;

}

.brand-list{

  padding-top: 10px;

}



.form-check-input:checked{

  background-color: var(--secondary);

  border-color: var(--secondary);

}



.form-check-input:focus {

    border-color: #ffda99;

    outline: 0;

    -webkit-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);

    box-shadow: 0 0 0 .25rem rgb(244, 165, 28, 0.25);

}

/* price */

.price-val-range {

    margin: 20px 0;

}

.box-price-product {

  display: flex;

  justify-content: space-between;

  font-size: 14px;

}

/*------------ shop ---------------- */

.noUi-target,

.noUi-target * {

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color: transparent;

  -webkit-user-select: none;

  -ms-touch-action: none;

  touch-action: none;

  -ms-user-select: none;

  -moz-user-select: none;

  user-select: none;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.noUi-target {

  position: relative;

  direction: ltr;

}



.noUi-base,

.noUi-connects {

  width: 100%;

  height: 100%;

  position: relative;

  z-index: 1;

}



.noUi-connects {

  overflow: hidden;

  z-index: 0;

}



.noUi-connect,

.noUi-origin {

  will-change: transform;

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  -ms-transform-origin: 0 0;

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-origin {

  left: auto;

  right: 0;

}



.noUi-vertical .noUi-origin {

  width: 0;

}



.noUi-horizontal .noUi-origin {

  height: 0;

}



.noUi-handle {

  position: absolute;

}



.noUi-state-tap .noUi-connect,

.noUi-state-tap .noUi-origin {

  -webkit-transition: transform 0.3s;

  transition: transform 0.3s;

}



.noUi-state-drag * {

  cursor: inherit !important;

}



.noUi-horizontal {

  height: 18px;

}



.noUi-horizontal .noUi-handle {

  width: 34px;

  height: 28px;

  left: -17px;

  top: -6px;

}



.noUi-vertical {

  width: 18px;

}



.noUi-vertical .noUi-handle {

  width: 28px;

  height: 34px;

  left: -6px;

  top: -17px;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-handle {

  right: -17px;

  left: auto;

}



.noUi-draggable {

  cursor: ew-resize;

}



.noUi-vertical .noUi-draggable {

  cursor: ns-resize;

}



.noUi-handle:after {

  left: 17px;

}



.noUi-vertical .noUi-handle:after,

.noUi-vertical .noUi-handle:before {

  width: 14px;

  height: 1px;

  left: 6px;

  top: 14px;

}



.noUi-vertical .noUi-handle:after {

  top: 17px;

}



[disabled] .noUi-connect {

  background: #b8b8b8;

}



[disabled] .noUi-handle,

[disabled].noUi-handle,

[disabled].noUi-target {

  cursor: not-allowed;

}



.noUi-pips,

.noUi-pips * {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.noUi-pips {

  position: absolute;

  color: #999;

}



.noUi-value {

  position: absolute;

  white-space: nowrap;

  text-align: center;

}



.noUi-value-sub {

  color: #ccc;

  font-size: 10px;

}



.noUi-marker {

  position: absolute;

  background: #ccc;

}



.noUi-marker-sub {

  background: #aaa;

}



.noUi-marker-large {

  background: #aaa;

}



.noUi-pips-horizontal {

  padding: 10px 0;

  height: 80px;

  top: 100%;

  left: 0;

  width: 100%;

}



.noUi-value-horizontal {

  -webkit-transform: translate(-50%, 50%);

  transform: translate(-50%, 50%);

}



.noUi-rtl .noUi-value-horizontal {

  -webkit-transform: translate(50%, 50%);

  transform: translate(50%, 50%);

}



.noUi-marker-horizontal.noUi-marker {

  margin-left: -1px;

  width: 2px;

  height: 5px;

}



.noUi-marker-horizontal.noUi-marker-sub {

  height: 10px;

}



.noUi-marker-horizontal.noUi-marker-large {

  height: 15px;

}



.noUi-pips-vertical {

  padding: 0 10px;

  height: 100%;

  top: 0;

  left: 100%;

}



.noUi-value-vertical {

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%, 0);

  padding-left: 25px;

}



.noUi-rtl .noUi-value-vertical {

  -webkit-transform: translate(0, 50%);

  transform: translate(0, 50%);

}



.noUi-marker-vertical.noUi-marker {

  width: 5px;

  height: 2px;

  margin-top: -1px;

}



.noUi-marker-vertical.noUi-marker-sub {

  width: 10px;

}



.noUi-marker-vertical.noUi-marker-large {

  width: 15px;

}



.noUi-tooltip {

  display: block;

  position: absolute;

  border: 1px solid #d9d9d9;

  border-radius: 3px;

  background: #fff;

  color: #000;

  padding: 5px;

  text-align: center;

  white-space: nowrap;

}



.noUi-horizontal .noUi-tooltip {

  -webkit-transform: translate(-50%, 0);

  transform: translate(-50%, 0);

  left: 50%;

  bottom: 120%;

}



.noUi-vertical .noUi-tooltip {

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  top: 50%;

  right: 120%;

}



.noUi-horizontal {

  height: 4px;

}



.noUi-target {

  border: 0;

}



.noUi-base .noUi-connects {

  border-radius: 999px;

  background-color: #e9e9e9;

}



.noUi-connect {

  background-color: var(--secondary);

}



.noUi-horizontal .noUi-handle,

.noUi-vertical .noUi-handle {

  height: 16px;

  width: 16px;

  border-radius: 50px;

  border: 2px solid var(--secondary);

  background-color: var(--secondary);

  box-shadow: unset;

  cursor: pointer;

}

.noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after,

.noUi-vertical .noUi-handle::before,

.noUi-vertical .noUi-handle::after {

  content: none;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-handle {

  right: -8px;

}









/* section banner */

.s-page-title {

    padding: 60px 0px;

    background-color: var(--bg-9);

}

.breadcrumbs-page {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}

.breadcrumbs-page .active{

  color: var(--primary);

  text-decoration: none;

}

@media screen and (min-width: 992px) {

  .s-page-title {

    padding: 80px 0px;

  }

}



@media screen and (min-width: 1200px) {

  .s-page-title {

    padding-top: 111px;

    padding-bottom: 110px;

  }

}





/* filter product-list */

@media screen and (min-width: 992px) {

  .product-list .offcanvas{

    width: 100%;

    visibility: visible;

    transform: translateX(0%);

    position: relative;

    border-right: 0px solid rgba(0, 0, 0, .2);

    z-index: 1;

  }

  .product-list .offcanvas .offcanvas-body{

    padding: 0px;

  }

  .product-list .offcanvas .offcanvas-header{

    padding: 0px;

  }

}





.bottom-border-line{

  border-bottom: 2px solid #e4e7ff;

}


/* product list */
.range-set-range-btn{
  width: 40px;height: 40px;border-radius: 50%;
}
.range-input-min{
  width: 33.33%;
}
.range-input-max{
  width: 33.33%;
}
/* product details */

.mySwiper2 .swiper-big img{

  width: 100%;

  aspect-ratio: 1/1;

  object-fit: contain;

}

.mySwiper2{

  border: 1px solid #f1f1f1;

  border-radius: 12px;

}

.description-view ul {

  padding-left: 2rem !important;

  list-style-type: disc !important;

  margin-block-start: 1em;

  margin-block-end: 1em;

  padding-inline-start: 2rem;

  unicode-bidi: isolate;

}



.small-thumb{

  width: 100%;

border-radius: 12px;
  aspect-ratio: 1/1;
}



.swiper-slide-thumb-active{

  border: 2px solid var(--primary);

  border-radius: 12px;

}



.profile-view{

  background-color: #F2F3F5;

  box-shadow: 0px 4px 8px 0px #00000033;

}

.profile-avtar-details img{

  width: 60px;

  height: 60px;
  border-radius: 50%;
  object-fit: cover;

}

.btn-whatsapp {

  background-color: #25D366;

  color: white;

  font-weight: 500;

  display: flex;

  align-items: center;

  justify-content: start;

  gap: 8px;

  border-radius: 6px;

  padding: 0px;

  transition: background-color 0.3s ease;

  border: 0px;

}

.btn-whatsapp span{

  padding: 11px .75rem;

}

.btn-whatsapp .icon-div{

  display: flex;

  align-items: center;

  height: 100%;

  padding: 11px 1rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #212529;

  text-align: center;

  white-space: nowrap;

  background-color: #0F6519;

  border: 1px solid #0F6519;

  border-radius: .25rem .0rem .0rem .25rem;

}

.btn-whatsapp:hover {

  background-color: #1ebe5c;

  color: white;

}

.btn-whatsapp i {

  font-size: 1.2rem;

}







.btn-phone {

  background-color: #2C62D5;

  color: white;

  font-weight: 500;

  display: flex;

  align-items: center;

  justify-content: start;

  gap: 8px;

  border-radius: 6px;

  padding: 0px;

  transition: background-color 0.3s ease;

  border: 0px;

}

.btn-phone span{

  padding: 11px .75rem;

}

.btn-phone .icon-div{

  display: flex;

  align-items: center;

  height: 100%;

  padding: 11px 1rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #212529;

  text-align: center;

  white-space: nowrap;

  background-color: #1F2D76;

  border: 1px solid #1F2D76;

  border-radius: .25rem .0rem .0rem .25rem;

}

.btn-phone:hover {

  background-color: #2C62D5;

  color: white;

}

.btn-phone i {

  font-size: 1.2rem;

}





.btn-email {

  background-color: #EA4335;

  color: white;

  font-weight: 500;

  display: flex;

  align-items: center;

  justify-content: start;

  gap: 8px;

  border-radius: 6px;

  padding: 0px;

  transition: background-color 0.3s ease;

  border: 0px;

}

.btn-email span{

  padding: 11px .75rem;

}

.btn-email .icon-div{

  display: flex;

  align-items: center;

  height: 100%;

  padding: 11px 1rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #212529;

  text-align: center;

  white-space: nowrap;

  background-color: #C5221F;

  border: 1px solid #C5221F;

  border-radius: .25rem .0rem .0rem .25rem;

}

.btn-email:hover {

  background-color: #EA4335;

  color: white;

}

.btn-email i {

  font-size: 1.2rem;

}



@media screen and (min-width: 576px) {

  .social-list .btn-whatsapp{

    width: 100%;

  }

  .social-list .btn-phone{

    width: 100%;

  }
  .social-list .btn-email{
    width: 100%;
  }

}





/* blog */

.entry_author-avtar-details img{

  width: 30px;

  height: 30px;

  object-fit: cover;

  border-radius: 50%;

}

span.has-dot::before {

    content: "";

    width: 4px;

    height: 4px;

    background: #d2d2d2;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    margin-top: -2px;

    display: block;

    left: -2px;

}



.meta-1 span {

  margin-right: 10px;

}

span.has-dot {

    position: relative;

    padding-left: 10px;

}



.blog-image{

  position: relative;

    width: 100%;

    /* max-width: 364px; */

    padding-bottom: 30%;

    background: #f0f0f0;

    z-index: 1;

    border-radius: 16px;

}

.blog-image img{

  position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 16px;

} 



/* blog-detail */

.ul-list {

    padding-left: 2rem !important;

    list-style-type: disc !important;

    margin-block-start: 1em;

    margin-block-end: 1em;

    padding-inline-start: 2rem;

    unicode-bidi: isolate;

}



/* blog */

.blog-img {

  margin: auto;

      display: flex;

      justify-content: center;

      align-items: center;

      background-color: #f4f4f4; /* Background color for padding area */

      padding-top: 68%; /* Padding to maintain aspect ratio */

      position: relative;

      overflow: hidden;

      border-radius: 15px;

}

.blog-img img{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover; /* Ensures the image covers the entire container */

  border-radius: 10px;

}

.card-container:hover{

  box-shadow: 0px 0px 0px 0px #00000033;  

} 

.blog-shadow{

  box-shadow: 0px 4px 18.2px 0px #00000033;

}

.bg-multicolor{

  background: linear-gradient(135deg, rgba(152, 177, 255, 0.5), rgba(176, 255, 185, 0.5));

}





/* dropdow */

.nice-select.dropdown-el:after{

  width: 9px;    

  height: 9px;

  right: 17px;

}

.nice-select.dropdown-el .list{

  width: 100%;

}

.nice-select.dropdown-el{

  padding: 0px;

}

/* .nice-select.dropdown-el {

    padding: .375rem .75rem;

    line-height: 30px;

} */

.nice-select .current{

  padding-left: 18px;

    padding-right: 30px;

    padding: .375rem .75rem;

    color: #6c757d;

}

.form-control{

  line-height: 28px;

      background-color: #fdfffb;

    border: 1px solid #95cf2b !important;

    border-radius: 8px;

}

.search-box input{ 

  border: 0px solid #e8e8e8 !important;

}

input{

  

  border: 1px solid #e8e8e8 !important;

}

/* .formbold-form-input{

  width: 100%;

    padding: 12px 24px;

    border-radius: 6px;

    border: 1px solid #e0e0e0;

    background: white;

    font-weight: 500;

    font-size: 16px;

    color: #6b7280;

    outline: none;

    resize: none;

} */





/* upload file */















     .file-upload-container {

      background-color: #e0f7fa;

      border: 2px dashed #0288d1;

      padding: 40px;

      text-align: center;

      border-radius: 15px;

      width: 100%;

      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    }

    .file-upload-container p {

      font-size: 16px;

      color: #0288d1;

      margin: 10px 0;

    }

    .file-upload-container .upload-btn {

      background-color: #0288d1;

      color: white;

      padding: 10px 20px;

      border: none;

      border-radius: 5px;

      cursor: pointer;

      font-size: 16px;

    }

    .file-upload-container .upload-btn:hover {

      background-color: #0277bd;

    }

    .file-upload-container .upload-icon {

      font-size: 48px;

      color: #0288d1;

    }

    .file-upload-containers input[type="file"] {

      display: none;

    }

    /* Optional: Hover effect when dragging files over */

    .file-upload-container.dragover {

      background-color: #b3e5fc;

    }





    /* profile */

    .border-screen{

      border: 0.5px solid #e4e7ff

    }

    .flip-horizontal {

      transform: scaleX(-1); /* Flip horizontally */

    }

    .contact-profile .contact-item {

      display: flex;

      align-items: center;

      padding: 10px 0;

      border-bottom: 1px solid #e4e7ff;

    }

    .contact-profile .contact-item:last-child {

      border-bottom: none;

    }

    .contact-profile .contact-item i {

      font-size: 20px;

      margin-right: 10px;

    }

    .contact-profile .contact-item a {

      text-decoration: none;

      color: #333;

      font-size: 16px;

    }

    .contact-profile .contact-item a:hover {

      color: #00bfae; /* Hover effect */

    }



    @media screen and (min-width: 992px) {

      .contect-p {

        margin-top: -100px;

      }

      

    }



    /* auth */

    .file-input-address .form-group{

      margin-bottom: 16px;

    }
    input{
          border: 1px solid #95cf2b !important;
    }

    a.book-btn:hover{

    background: var(--primary);

    color: #fff;  

    -webkit-text-fill-color: #fff

    }

    a.book-btn:hover span{

    color: #fff;  

    }

    .book-btn {

    background-color: var(--primary);

    color: #fff;

    border: none;

    border-radius: 8px;

    padding: 8px 12px;

}

a:hover {

    /* color: var(--text-gradient); */

    /* background: var(--text-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent; */

}

.social-login-separator{

  width: 100%;

    margin: 20px 0 20px 0;

    text-align: center;

    position: relative;

}

.social-login-separator span {

    font-size: 16px;

    line-height: 1;

    padding: 0 20px;

    background: #fff;

    position: relative;

    z-index: 2;

    text-transform: uppercase;

}

.social-login-separator:after {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    width: 100%;

    height: 1px;

    background: #d4dcff;

    z-index: 1;

}





.social-logins {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    width: 100%;

}



.social-logins.social-logins-full .social-login {

    width: 100%;

    margin: 0 0 10px 0;

}



.social-login {

    min-width: calc((100% / 2) - 15px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 10px 20px;

    border: 1px solid #d4dcff;

    border-radius: 4px;

    margin: 0 0 10px 0;

    position: relative;

    cursor: pointer;

}



.social-login svg {

    width: 25px;

    height: 25px;

    margin: 0 10px 0 0;

}



.card{

  border: 1px solid #e4e7ff !important;

}

.book-btn-border {

    border: 1px solid var(--primary) !important;

    background-color: transparent;

    color: var(--primary-color);

    border: none;

    border-radius: 8px;

    padding: 8px 12px;

}







/* contact us */

.shadow_smc {

    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.075) !important;

}

.borderc_1 {

    border: 1px solid #e4e7ff;

}

.contect_details .promo-banner {

    /* background-color: #f8f9fc; */

    border-radius: 12px;

    padding: 1rem;

    display: flex

;

    align-items: center;

    gap: 1rem;

    max-width: 400px;

    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */

}

.contect_details .promo-icon {

    background-color: #e0e7ff;

    color: var(--primary-color);

    border-radius: 6px;

    padding: 0.75rem;

    display: flex

;

    align-items: center;

    justify-content: center;

    font-size: 1.63rem;

}

.contect_details .promo-text p {

    margin: 0;

    color: #6c757d;

    font-size: 0.875rem;

}

.safety-tips .hero {

  background: var(--primary);

  color: #fff;

  padding: 3rem 1rem;

  text-align: center;

  margin-bottom: 2rem;

}

/* lagal */

.info-card {

  border: none;

  border-radius: 0.6rem;

  box-shadow: 0 2px 8px rgba(0,0,0,0.08);

  overflow: hidden;

  margin-bottom: 1rem;

}

.info-card-header {

  background-color: #e9ffcf;

  color: var(--black);

  font-weight: 600;

  padding: 0.75rem 1rem;

  display: flex;

  align-items: center;

}

.info-card-header i {

  margin-right: 8px;

}

.info-card-body {

  background: #fff;

  padding: 1rem 1.25rem;

  font-size: 0.95rem;

  line-height: 1.6;

}

.list-disc{

  list-style-type: disc !important;

}



/* policy */

.center-section{

  /* background-color: #faf9f5; */

}

.other-header {

    background-color: var(--primary);

    color: white;

    padding: 2rem 1rem;

    border-radius: 0.5rem 0.5rem 0 0;

}

.other-content {

    background-color: white;

    padding: 2rem;

    border-radius: 0 0 0.5rem 0.5rem;

    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

}

h5 {

    color: var(--primary);

    margin-top: 1.5rem;

}



/* about us */

.bg-gradient1 {

  background: linear-gradient(150deg, rgba(153, 213, 44, 0.8) 25%, #EDE9FE 75%);

}

.ecosystem-section {

  padding: 5rem 0;

  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);

}



.ecosystem-card {

  background: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 20px;

  padding: 2.5rem;

  height: 100%;

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

}



.ecosystem-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: var(--primary-gradient);

  transform: translateX(-100%);

  transition: transform 0.3s ease;

}



.ecosystem-card:hover::before {

  transform: translateX(0);

}



.ecosystem-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 20px 40px var(--glow-color);

  border-color: var(--accent-color);

}



.card-icon {

  font-size: 3rem;

  color: var(--accent-color);

  margin-bottom: 1.5rem;

  display: inline-block;

  transition: transform 0.3s ease;

}



.ecosystem-card:hover .card-icon {

  transform: scale(1.1) rotate(5deg);

}

.ecosystem-card-icons{

  background: var(--text-gradient);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}
.line-h2 {
    height: 2.5em;
    /* height: 3.3em; */
}
.line-p2{
  height: 2.9em;
}
.text-ellipsis1 {
    display: -webkit-box;
    max-width: 100%;
    margin: 0 auto;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-ellipsis2 {
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-ellipsis3 {
    display: -webkit-box;
    max-width: 100%;
    margin: 0 auto;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}




/* ic vendout */

/* add_post */
.category-product-icon brn-group {
  overflow-y: scroll;
}
.category-product-icon [type='radio'] {
display: none; 
}
.category-product-icon ul li h6 {
font-size: 14px;
padding-top: 10px;
color: #333333;
}
.category-product-icon .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {
  color: #ffffff;
  background-color: #e1ffaa;
  border-color: #e1ffaa;
}

.category-product-icon ul li.btn.btn-light {
width: 120px;
}
.classiser-search-bar.bg-remove .search-inner {
background: transparent;
}
.categories-list-ad .widget-title {
font-size: 20px
}

.categories-list-ad .categories-list {
padding: 10px 20px 20px;
margin-top: 30px;
background-color: #fff;
box-shadow: 0 2px 18px 0 rgba(198, 198, 198, .3)
}

.categories-list-ad .categories-list li {
clear: both;
overflow: hidden;
padding: 8px 0;
border-bottom: 1px solid #eee
}

.categories-list-ad .categories-list li a {
color: #2d2d2d
}

.categories-list-ad .categories-list li a i {
margin-right: 5px
}

.categories-list-ad .categories-list li a:hover {
color: #99D52C;
}

.categories-list-ad .categories-list li:last-child {
border-bottom: none
}

.addPost-page .categories-list-ad {
  margin-top: 0;
}
.addPost-page .btn-group, .btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: block;
  vertical-align: middle;
}
.addPost-page .category-product-icon ul li.btn.btn-light {
  width: 100%;
  text-align: left;
  display: flex;
  margin-bottom: 10px;
  padding-left: 10px;
}
.category-product-icon ul li h6 {
padding-left: 10px;
}
.addPost-page .font-size-20 {
font-size: 20px;
display: flex;
}
.addPost-page .dashboard-wrapper {
margin-top: 30px;
  background-color: #fff;
  box-shadow: 0 2px 18px 0 rgba(198, 198, 198, .3);
  margin-bottom: 20px;
}
.addPost-page .categories-list-ad .widget-title {
display: flex;
}

.number-round {
  width: 30px;
  height: 30px;
  display: table;
  background: #99D52C;
  vertical-align: baseline;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  color: #fff;
  padding:3px; 
}

.addPost-page .categories-list {
max-height: 700px;
  padding: 10px !important;
  /* min-height: 700px; */
  overflow: auto;
}


@media (max-width: 767px) {
.addPost-page .categories-list {
  margin-bottom: 20px;
}
}

@media (max-width: 1199px) {
.addPost-page .category-product-icon ul li.btn.btn-light {
    overflow-x: auto;
}
}

/* addPost-page E */

.preview-images-zone {
  width: 100%;
  border: 1px solid #ddd;
  min-height: 90px;
  /* display: flex; */
  padding: 5px 5px 5px 5px;
  position: relative;
  overflow:auto;
}
.preview-images-zone > .preview-image:first-child {
  height: 150px;
  width: 150px;
  position: relative;
  margin-right: 5px;
}
.preview-images-zone > .preview-image {
  height: 90px;
  width: 90px;
  position: relative;
  margin-right: 5px;
  float: left;
  margin-bottom: 5px;
}
.preview-images-zone > .preview-image > .image-zone {
  width: 100%;
  height: 100%;
}
.preview-images-zone > .preview-image > .image-zone > img {
  width: 100%;
  height: 100%;
}
.preview-images-zone > .preview-image > .tools-edit-image {
  position: absolute;
  z-index: 100;
  color: #fff;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  display: none;
}
.preview-images-zone > .preview-image > .image-cancel {
  font-size: 18px;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  margin-right: 10px;
  cursor: pointer;
  display: none;
  z-index: 100;
}
.preview-image:hover > .image-zone {
  cursor: move;
  opacity: .5;
}
.preview-image:hover > .tools-edit-image,
.preview-image:hover > .image-cancel {
  display: block;
}
.ui-sortable-helper {
  width: 90px !important;
  height: 90px !important;
}

.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.imageThumb {
  width: 100%;
  max-width: 100px;
  object-fit: contain;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  border-color: #000;
  border: 1px solid !important;
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  padding-bottom: 1px;
  cursor: pointer;
}
.remove {
  border: 1px solid black !important;
  font-size: 13px;
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}


.dashboard-wrapper {
padding: 10px 15px
}

/* product details */
.description-info .description {
  background: #f6f9f3;
  padding: 30px;
}

/* my ads */
div #active_wrapper {
  margin-top: 20px;
}

div#in-active_wrapper {
  margin-top: 20px;
}

div#draft_wrapper {
  margin-top: 20px;
}
div#closed_wrapper {
  margin-top: 20px;
}
div#all_ads_wrapper {
  margin-top: 20px;
}

.nav-tabs .nav-link.active{
background-color: var(--primary);
color:white;
}
.nav-tabs .nav-link{
background-color: white;
}

#pagination strong {
  z-index: 2;
  color: #fff;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  position: relative;
  display: inline-block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
}
#pagination  a{
  position: relative;
  display: inline-block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: var(--accent-color);
  background-color: #fff;
  border: 1px solid #ddd;
  text-decoration: none;
}

/* my ads */
.inner-box{
  background: #f6f9f3;  
}
.nav-table ul li a {
  color: #08a9dd;
  padding: 7px 16px;
  display: inline-block;
  border: 1px solid #eaedef;
  border-radius: 4px;
}
.dashboard-box {
  width: 100%;
  display: inline-block;
  padding: 10px;
  border-bottom: 1px solid #eaedef;
}
.dashboard-wrapper .nav-tabs .nav-link{
  color: var(--accent-color);
}
.dashboard-wrapper .nav-tabs .nav-link.active{
  color: #fff;
}


/* forgot password */
.login-area {
  width: 100%;
  background: #f6f9f3;
  border: 1px solid #eff1ee;
}
.login-area h3 {
  margin: 0;
  padding: 0 20px;
  font-weight: 500;
  background: #eff3ec;
  text-align: center;
  border-bottom: 1px solid #eff1ee;
}
.login-area .login-form {
  padding: 15px 15px;
}