/** =============================================================================================================== **/  
/** GLOBAL RELATED ------------------------------------------------------------------------------------------------ **/ 
*:focus { box-shadow: unset !important; } 
:root { --navbar_height: 40px; }
nav { height:var(--navbar_height); }
.fa-stack {width:2em;height:2em;}
.no_caret::after {display: none !important;}
/** GLOBAL RELATED ------------------------------------------------------------------------------------------------ **/ 
/** =============================================================================================================== **/  






/** =============================================================================================================== **/  
/** dark/light mode RELATED: DEFAULT/LIGHT MODE ------------------------------------------------------------------- **/  
:root,
html[data-bs-theme="light"] {
    --bs-primary: #d6008a;
    --bs-primary-rgb: 214, 0, 138;  


    /* subtle background derived from your magenta */
    --bs-primary-bg-subtle: #ffeaf7; 
    --bs-primary-border-subtle: #f7c4e5;



  --bs-body-inverse-bg: #000;
  --bs-body-inverse-text: #fff;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.85);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.85);

  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.75);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.75);

  --bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), 0.5);
  --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), 0.5);
}
.btn-outline-primary {
  --bs-btn-bg: #ffeaf7;
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.85);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.85);
  --bs-btn-active-color: #fff;
}
/** dark/light mode RELATED: DEFAULT/LIGHT MODE ------------------------------------------------------------------- **/  
/** =============================================================================================================== **/  











/** =============================================================================================================== **/  
/** div_laurel CSS DEFINITIONS ------------------------------------------------------------------------------------ **/  
.div_laurel {width:265px;text-align:center;display:inline-block;}  

.div_laurel span {
  height:80px;
  width:calc(100% - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
}  
.div_laurel::before, .div_laurel::after {
  content:"";
  height:80px;
  width:30px;
  background:transparent url(../images/laurel_left.png) right center/15px auto no-repeat;
  display:block;
  float:left;
}  
.div_laurel::after {
  background:transparent url(../images/laurel_right.png) left center/15px auto no-repeat;
  float:right;
}  
[data-bs-theme="dark"] .div_laurel::before, [data-bs-theme="dark"] .div_laurel::after { filter: brightness(1.6);}
/** div_laurel CSS DEFINITIONS ------------------------------------------------------------------------------------ **/  
/** =============================================================================================================== **/  



/** =============================================================================================================== **/  
/** navbar, header, footer RELATED -------------------------------------------------------------------------------- **/  

.navbar_bypass { padding-top:var(--navbar_height); }
.navbar-brand, .navbar-brand:hover {
  color:var(--bs-primary);
  padding-left:35px;
  background: transparent url("../images/styleverse_logo_magenta.png") left center/auto 80% no-repeat;
  
}

[data-bs-theme="dark"] .navbar-brand, [data-bs-theme="dark"] .navbar-brand:hover {background-image: url("../images/styleverse_logo_white.png"); color:var(--bs-light-rgb)}


.navbar .offcanvas {--bs-offcanvas-width: 280px !important;}

footer .navbar-brand, footer .navbar-brand:hover {padding-left:24px;}



.text_shadow {  text-shadow: 1px 1px 1px #ffffff;}
 [data-bs-theme="dark"] .text_shadow {  text-shadow: 1px 1px 1px #000000;}
.btn_icon {width:30px;height:30px;}

header .ui_credit_current {left:2px;top:3px !important;height:15px;width:15px;  font-size: 0.6em;}
/** --------------------------------------------------------------------------------------------------------------- **/  
/** =============================================================================================================== **/ 

/** =============================================================================================================== **/    
/** background CSS DEFINITIONS ------------------------------------------------------------------------------------ **/  
.bg_loading { 
  background: transparent url(../images/loading.gif) center center/cover no-repeat fixed;  
}  


.bg_washed {background: linear-gradient(90deg,rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0.7));}
[data-bs-theme="dark"] .bg_washed {background: linear-gradient(90deg,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4));}
.bg_ig_gradient {
  background: linear-gradient(135deg,
   rgba(81, 91, 212, 0.2),
   rgba(129, 52, 175, 0.2),
   rgba(221, 42, 123, 0.2),
   rgba(245, 133, 41, 0.2),
   rgba(254, 218, 119, 0.2)
   );
}
.bg_body_default { 
  background: linear-gradient(to bottom,rgba(255, 255, 255,0.4), rgba(255, 255, 255,0.4)), url(../images/bg_4.jpg) center center/cover no-repeat fixed; 
}
[data-bs-theme="dark"] .bg_body_default { 
  background: linear-gradient(to bottom,rgba(0, 0, 0,0.7), rgba(0, 0, 0,0.7)), url(../images/bg_4.jpg) center center/cover no-repeat fixed; 
}
.bg_move_around {
    background-size: 150% 150%;
    background-attachment: scroll;
    background-repeat: no-repeat;
    animation-name: bg_move_around_anim;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes bg_move_around_anim {
    0%   { background-position: center center; }
    15%  { background-position: left top; }
    30%  { background-position: left bottom; }
    45%  { background-position: right top; }
    60%  { background-position: right bottom; }
    75%  { background-position: left bottom; }
    100% { background-position: center center; }
}
.bg_contact_us { 
  background: linear-gradient(90deg,rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.5), rgba(255,255,255,0)),
  url(https://images.pexels.com/photos/8867431/pexels-photo-8867431.jpeg) center center/cover no-repeat;  
}  

[data-bs-theme="dark"] .bg_contact_us { 
  background: linear-gradient(90deg,rgba(0,0,0,0.7), rgba(0,0,0,0.7), rgba(0,0,0,0.5), rgba(0,0,0,0)),
  url(https://images.pexels.com/photos/8867431/pexels-photo-8867431.jpeg) center center/cover no-repeat;  
}  
@media (max-width: 768px) { /** Medium devices (tablets, 768px and down)**/
.bg_contact_us {
  background: linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.8),rgba(255,255,255,0.5), rgba(255,255,255,0)),
  url(https://images.pexels.com/photos/8867431/pexels-photo-8867431.jpeg) center center/cover no-repeat;
  }
}
/** background CSS DEFINITIONS ------------------------------------------------------------------------------------ **/  
/** =============================================================================================================== **/  




/** =============================================================================================================== **/  
/** utilities CSS DEFINITIONS ------------------------------------------------------------------------------------- **/  
.text_shadow {
  color: #222; /* Dark text color for good contrast */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),   /* soft blur */
    0 0.5px 0 rgba(0, 0, 0, 0.06);   /* very light crisp edge */
}
[data-bs-theme="dark"] 
.text_shadow {
  color: #ddd; /* light text */
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.12),   /* soft blur */
    0 0.5px 0 rgba(255, 255, 255, 0.06);   /* very light crisp edge */
}

/* Base state (NO blur) — transition applies here */
.block_ui_blur {
  filter: blur(0);
  transition: filter 0.35s ease-out; /* slow unblur */
}

/* Blur state — NO transition here */
.block_ui_blur.blur {
  filter: blur(4px);
  transition: none; /* instant blur */
}

.shadow_sm_top {
  --bs-box-shadow-sm: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  box-shadow: var(--bs-box-shadow-sm) !important;
}  
/** utilities CSS DEFINITIONS ------------------------------------------------------------------------------------- **/  
/** =============================================================================================================== **/  





/** =============================================================================================================== **/  
/** trending_scroller CSS DEFINITIONS ------------------------------------------------------------------------------------- **/  


/* add a subtle fade on both sides to hint horizontal scroll */
.trending_scroller {
  position: relative;

  /* DO NOT stretch across the row */
  flex: 0 1 auto;
  max-width: 100%;

  /* scrolling behavior */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

  margin-left: 0.25rem;
}

/* right-side fade */
.trending_scroller::after,
.trending_scroller::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  pointer-events: none; /* don't block scrolling/taps */
  z-index: 1;
}

/* fade on the right edge */
.trending_scroller::after {
  right: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--bs-body-bg, #fff)
  );
}

/* fade on the left edge (optional, remove if you only want right side) */
.trending_scroller::before {
  left: 0;
  background: linear-gradient(
    to left,
    transparent,
    var(--bs-body-bg, #fff)
  );
}

/* adjust for dark mode */
[data-bs-theme="dark"] .trending_scroller::after,
[data-bs-theme="dark"] .trending_scroller::before {
  background: linear-gradient(
    to right,
    transparent,
    var(--bs-body-bg, #000)
  );
}
[data-bs-theme="dark"] .trending_scroller::before {
  background: linear-gradient(
    to left,
    transparent,
    var(--bs-body-bg, #000)
  );
}





/** trending_scroller CSS DEFINITIONS ------------------------------------------------------------------------------------- **/  
/** =============================================================================================================== **/  


















.accordion-button:not(.collapsed) {
  color:var(--bs-primary);

 
}
.nav-link {
  color: var(--bs-primary);
}
.nav-link.active {

  background-color: var(--bs-primary) !important;
}








 
.text_gradient {
  /* Create a horizontal gradient with 4 colors */
  background: linear-gradient(90deg, rgba(254, 218, 117, 1),rgba(250, 126, 30, 1),rgba(214, 41, 118, 1),rgba(150, 47, 191, 1), rgba(79, 91, 213, 1));
  -webkit-background-clip: text; /* Needed for Safari/iOS */
  background-clip: text;
  color: transparent; /* Makes the text itself transparent so the background shows through */
  
  /* Optional: improve rendering on some browsers */
  -webkit-text-fill-color: transparent;




  background-size: 200% 200%; /* Make it larger so movement is visible */
  animation: scroll-gradient 6s linear infinite;


}




@keyframes scroll-gradient {
  0%   { background-position: top left; }
  25%   { background-position: top right; }  
  50%   { background-position: bottom right; }  
  75% { background-position: bottom left; }
  100% { background-position: top left; }
}




 .border_dashed {
    border-style: dashed !important;
}

.carousel_item_height {height:440px;}  

/** Small devices (landscape phones, 576px and up) **/
@media (min-width: 576px) { .carousel_item_height {height:480px;}  }