/* ####################################################
    :: Template Name: Essence - Fashion Ecommerce Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Description: Essence is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform.
    :: Version: 1.0.0
    :: Created: April 27, 2018
    :: Last Updated: May 2, 2018
    :: Restyled: iconic aurora refresh (selectors, ids and markup unchanged)
    #################################################### */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap");

/* ---------------------------------------
    ##### - DESIGN TOKENS - #####
    --------------------------------------- */
:root {
  --ink: #0f0c24;
  --ink-soft: #3a3656;
  --muted: #6b6884;
  --bone: #fbf9ff;
  --mist: #efeafb;
  --line: #e7e1f5;
  --violet: #6d4cff;
  --violet-deep: #4f31e0;
  --fuchsia: #c447ff;
  --rose: #ff3d81;
  --coral: #ff7a45;
  --mint: #22d3a0;
  --mint-deep: #12b886;
  --gold: #f6c453;
  --danger: #ef3b55;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 12px -2px rgba(15, 12, 36, 0.12);
  --shadow-md: 0 18px 40px -16px rgba(15, 12, 36, 0.3);
  --shadow-lg: 0 36px 70px -24px rgba(79, 49, 224, 0.45);
  --glow: 0 16px 40px -12px rgba(196, 71, 255, 0.6);
  --grad: linear-gradient(115deg, #6d4cff 0%, #c447ff 52%, #ff3d81 100%);
  --grad-cool: linear-gradient(115deg, #6d4cff 0%, #22d3a0 100%);
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --font-display: "Fraunces", Cambria, Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

::selection {
  background: var(--violet);
  color: #fff;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(109, 76, 255, 0.55);
  outline-offset: 2px;
}

/* ---------------------------------------
    ##### - PLACE YOUR CUSTOM CSS HERE - #####
    --------------------------------------- */
/*Sibendra*/
.font-medium {
  font-size: 14px;
  font-family: var(--font-body);
  letter-spacing: 0.005em;
}
.font-sm {
  font-size: 12px !important;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}
/*Updated Sibendra*/

.fs-custom {
  font-size: 50px !important;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 60px;
}
.fs-custom-span-1 {
  display: block !important;
}
.cs-btn-banner {
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: var(--font-body);
  color: #fff;
  padding: 10px 34px !important;
  background: var(--ink) !important;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: transform 300ms var(--ease), background 300ms var(--ease),
    box-shadow 300ms var(--ease);
}
.cs-btn-banner:hover {
  font-size: 16px !important;
  color: #fff;
  background: linear-gradient(120deg, var(--violet), var(--mint)) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(109, 76, 255, 0.55);
}
.catagory-content {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.catagory-content > a {
  text-decoration: none !important;
}
.overlay:hover {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    160deg,
    rgba(22, 19, 43, 0.55),
    rgba(109, 76, 255, 0.55)
  ) !important;
}
.overlay:hover > .catagory-content > a {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  color: #fff;
  transform: scale(1.07);
}
.single-product-cs {
  margin-top: 7px;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}
.single-product-cs:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.section-padding-40 {
  padding: 40px 0;
}
/**/
.single_catagory_area_banner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
}
.overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    160deg,
    rgba(250, 248, 245, 0.55),
    rgba(236, 232, 244, 0.35)
  );
}
.single-product-image {
  width: 100%;
  height: 135px !important;
  object-fit: cover;
}
.sec-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sec-title:before,
.sec-title:after {
  display: inline-block;
  content: "";
  border-top: 2px solid var(--mint);
  border-radius: 2px;
  width: 3rem;
  margin: 0px 10px;
  transform: translateY(-8px);
}
.sec-title:before {
  border-image: linear-gradient(to right, transparent, var(--violet)) 1;
}
.sec-title:after {
  border-image: linear-gradient(to right, var(--mint), transparent) 1;
}
.btn-cs {
  background-image: linear-gradient(120deg, var(--violet), var(--mint));
  background-size: 140% 100%;
  background-position: 0% 50%;
  color: #fff !important;
  font-weight: 600 !important;
  font-family: var(--font-body);
  font-size: 14px;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 22px -10px rgba(109, 76, 255, 0.6);
  transition: background-position 400ms var(--ease), transform 300ms var(--ease),
    box-shadow 300ms var(--ease);
}
.btn-cs:hover {
  /*font-size: 14px;*/
  color: #fff;
  background-image: linear-gradient(120deg, var(--violet), var(--mint));
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(25, 194, 138, 0.6);
}

.single_catagory_area_banner .catagory-content a {
  display: block;
  font-size: 30px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.testimonial-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--violet), var(--shadow-md);
}
.testimonial-content {
  line-height: 20px;
  font-family: var(--font-body);
  color: var(--ink-soft);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single_catagory_area_banner {
    height: 180px;
  }
  .fs-custom {
    font-size: 38px !important;
    line-height: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .single_catagory_area_banner {
    height: 180px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single_catagory_area_banner {
    margin-bottom: 30px;
  }
  .fs-custom {
    font-size: 27px !important;
    line-height: 35px;
  }
}
@media only screen and (min-width: 500px) and (max-width: 575px) {
  .fs-custom {
    font-size: 27px !important;
    line-height: 35px;
  }
  .fs-custom-span-2 {
    display: block;
  }
}
@media only screen and (min-width: 200px) and (max-width: 499px) {
  .fs-custom {
    font-size: 30px !important;
    line-height: 32px;
  }
  .fs-custom-span-2 {
    display: block;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single_catagory_area_banner .catagory-content a {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .single_catagory_area_banner .catagory-content a {
    font-size: 18px;
  }
}

/**/

/*Updated Sibendra*/

.font-six {
  font-weight: 600;
}
.cus-disp {
  display: flex;
}
.cus-flex-btwn {
  display: flex;
  justify-content: space-between;
}
.dark-crystalo {
  background-color: #2a2745;
}
.success-crystallo {
  background-color: var(--mint-deep);
}
.saffron-crystallo {
  background-color: var(--coral);
}
.primary-crystallo {
  background-color: var(--violet);
}
.danger-crystallo {
  background-color: var(--danger);
}
.crystallo-des {
  width: 45px;
  height: 45px;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.crystallo-des:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--shadow-md);
}
.summ-des {
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.crtstallo-text {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-bottom: 0;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  color: white;
}
.summ-cust {
  display: flex;
}
.summ-wd {
  width: calc(100% / 2);
}

.classy-menu {
  display: none;
}

.header_area .classynav ul li a.user-menu {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--mist);
  border-radius: var(--radius-pill);
  width: 100%;
  transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
.header_area .classynav ul li a.user-menu:hover {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(109, 76, 255, 0.15);
}
.header_area .classynav ul li ul.dropdown.user-corner-dropdown-menu {
  right: 0;
  left: auto;
  padding: 6px 0 0;
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.user-login-info .classynav > ul > li.cn-dropdown-item.has-down > .dd-arrow {
  top: 38px;
}

.list-group-item {
  background: transparent !important;
  border: 0 !important;
  padding: 3px 12px 3px 0 !important;
}

.list-group-item a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-family: var(--font-body);
  transition: color 250ms var(--ease), padding-left 250ms var(--ease);
}
.list-group-item a:hover {
  text-decoration: none;
  color: var(--mint);
  padding-left: 4px;
}

.footer_social_area a {
  padding: 12px 16px;
  color: #fff;
  font-size: 22px;
  transition: color 250ms var(--ease), transform 250ms var(--ease);
}
.footer_social_area a:hover {
  color: var(--mint);
  transform: translateY(-3px);
}

.footer_area {
  padding-bottom: 0 !important;
}

@media only screen and (max-width: 410px) and (min-width: 200px) {
  .cus-flex-btwn {
    display: block;
    text-align: center;
  }
}

@media only screen and (max-width: 767px) and (min-width: 445px) {
  .cus-sum-ms {
    display: flex;
    justify-content: space-around;
  }
  .summ-wd-crystallo {
    width: calc(100% / 2);
  }
}

@media only screen and (max-width: 488px) and (min-width: 200px) {
  .cus-disp {
    display: block;
  }
  .cus-disp-fst > button:nth-child(2) {
    margin-top: 0.5rem !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .cus-disp-fst > button:nth-child(1) {
    width: 100% !important;
  }
  .cus-margin {
    margin-top: 0.5rem !important;
    margin-left: 0 !important;
  }
  .cus-width {
    width: calc(100% / 2) !important;
  }
}

@media screen and (max-width: 573px) and (min-width: 487px) {
  .cus-disp {
    display: block;
  }
  .cus-disp-fst {
    display: flex;
  }
  .cus-disp-fst > button:nth-child(2) {
    margin-top: 0 !important;
    margin-left: 0.25rem !important;
  }
  .cus-margin {
    margin-top: 0.5rem !important;
    margin-left: 0 !important;
  }
  .cus-width {
    width: calc(100% / 2) !important;
  }
}

@media only screen and (max-width: 767px) and (min-width: 574px) {
  .cus-disp {
    display: flex;
  }
  .cus-disp-fst {
    display: flex;
  }
  .cus-disp-fst > button:nth-child(2) {
    margin-top: 0 !important;
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
  .cus-disp {
    display: block;
  }
  .cus-margin {
    margin-top: 0.5rem !important;
    margin-left: 0 !important;
  }
  .cus-width {
    width: calc(100% / 2);
  }
  .cus-disp-fst {
    display: flex;
  }
  .cus-disp-fst > button:nth-child(2) {
    margin-top: 0 !important;
    margin-left: 0.25rem !important;
  }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
  .cs-wd {
    width: 30%;
  }
}
@media only screen and (min-width: 992px) {
  .classy-menu {
    display: block;
  }
  .classynav ul li.main-logout-li {
    display: none;
  }
  .cs-wd {
    width: 25%;
  }
  .cus-disp-fst > button:nth-child(2) {
    margin-top: 0 !important;
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }
}
/*Sibendra*/


/* ####################################################
   :: SIGNATURE LAYER — matches core-style.css
   Aurora gradient (violet → orchid → rose) on the things people act on.
   #################################################### */

/* Banner headline: aurora ink */
.fs-custom {
  letter-spacing: -0.035em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; }

/* Buttons */
.cs-btn-banner {
  background: var(--grad) !important;
  background-size: 220% 100% !important;
  background-position: 0% 50% !important;
  box-shadow: var(--glow);
  transition: background-position 500ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.cs-btn-banner:hover {
  background: var(--grad) !important;
  background-size: 220% 100% !important;
  background-position: 100% 50% !important;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -14px rgba(255, 61, 129, 0.55); }
.btn-cs {
  background-image: var(--grad);
  background-size: 220% 100%;
  box-shadow: var(--glow); }
.btn-cs:hover {
  background-image: var(--grad);
  background-position: 100% 50%;
  box-shadow: 0 22px 44px -14px rgba(255, 61, 129, 0.55); }

/* Section title flourish */
.sec-title:before { border-image: linear-gradient(to right, transparent, var(--violet)) 1; }
.sec-title:after { border-image: linear-gradient(to right, var(--rose), transparent) 1; }

/* Category banners */
.single_catagory_area_banner { box-shadow: var(--shadow-sm); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.single_catagory_area_banner:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.overlay:hover {
  background: linear-gradient(160deg, rgba(15, 12, 36, 0.62), rgba(196, 71, 255, 0.55) 60%, rgba(255, 61, 129, 0.5)) !important; }

/* Cards */
.single-product-cs { border-radius: var(--radius-md); }
.single-product-cs:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px rgba(196, 71, 255, 0.5), var(--shadow-lg); }

/* Testimonials */
.testimonial-img { box-shadow: 0 0 0 3px var(--fuchsia), var(--glow); }
.testimonial-content { color: var(--ink-soft); }

/* Color chips */
.crystallo-des:hover { box-shadow: var(--glow); }

/* User menu */
.header_area .classynav ul li a.user-menu:hover { border-color: var(--fuchsia); box-shadow: 0 0 0 4px rgba(196, 71, 255, 0.16); }
.header_area .classynav ul li ul.dropdown.user-corner-dropdown-menu { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }

/* Footer */
.list-group-item a:hover { color: var(--mint); }
.footer_social_area a:hover { color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  .single_catagory_area_banner:hover,
  .single-product-cs:hover { transform: none !important; } }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .cs-btn-banner,
  .btn-cs,
  .single-product-cs,
  .crystallo-des,
  .list-group-item a,
  .footer_social_area a,
  .overlay:hover,
  .overlay:hover > .catagory-content > a {
    transition: none !important;
    transform: none !important;
  }
}