/** ================================================================================================== **/  
/** -------------------------------------------------------------------------------------------------- **/   
: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-outline-primary {
  --bs-btn-bg: #fff1fa;                                     /** default rgba(var(--bs-primary-rgb), 0.05);  **/
  --bs-btn-color: rgba(var(--bs-primary-rgb));                /** default **/
  --bs-btn-border-color: rgba(var(--bs-primary-rgb));         /** default **/

  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb));             /** when hover **/
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb));   /** when hover **/
  --bs-btn-hover-color: #ffffff;                            /** when hover **/  

  --bs-btn-active-bg:  rgba(var(--bs-primary-rgb));           /** when clicked **/
  --bs-btn-active-border-color:  rgba(var(--bs-primary-rgb)); /** when clicked **/
  --bs-btn-hover-color: #ffffff;                            /** when clicked **/   
}



.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);
}
/** -------------------------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/  

/** ================================================================================================== **/ 
/** -------------------------------------------------------------------------------------------------- **/ 
*:focus { box-shadow: none !important; } 
.form-control:focus {
  box-shadow: none;
  border-color: inherit;
  outline: none;
}

:root { --navbar_height: 40px; }
/** -------------------------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/ 



/** ================================================================================================== **/  
/** navbar related ----------------------------------------------------------------------------------- **/ 
.navbar_bypass { padding-top:var(--navbar_height); } 

.navbar_bypass .navbar_toggle_menu[aria-expanded="true"] > i.fa-solid::before {content: "\f00d";}

.navbar .btn_icon {width:30px;height:30px;}
.navbar .dropdown-menu li:not(:first-child) {
  border-top: dashed 1px #666666;
}
/** Below lg (xs, sm, md) — max-width **/
@media (max-width: 991.98px) { 
  .navbar .nav-item {border-top: dashed 1px #666666;}
  .navbar .dropdown-menu {  
    box-shadow:unset !important; 
    border:unset !important;
    border-radius:unset !important;
    background:unset !important;
  }
  .navbar .dropdown-menu li {border-top: dashed 1px #666666;}
}


.navbar-brand, .navbar-brand:hover {
  color:var(--bs-primary);
  padding-left:35px;
  background: transparent url("https://styleverse.io/images/styleverse_logo_magenta.png") left center/auto 80% no-repeat;  
  opacity:1;
}
.navbar-brand:hover {opacity:0.8;}
footer .navbar-brand, footer .navbar-brand:hover {padding-left:25px;}

.navbar .nav-item.active {border-bottom:solid 3px rgba(var(--bs-primary-rgb), 0.4);}
.navbar .nav-item.active .nav-link {color:rgba(var(--bs-primary-rgb), 0.4); }


.navbar .dropdown-item.active {background-color:rgba(var(--bs-primary-rgb), 0.05);color:rgba(var(--bs-primary-rgb), 0.4);}

/** Below lg (xs, sm, md) — max-width **/
@media (max-width: 991.98px) { 
  
 .navbar .nav-item.active {border-bottom:unset;  }
 
}

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





/** navbar related ----------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/  




/** ================================================================================================== **/  
/** navbar navbar_toggle_menu ------------------------------------------------------------------------ **/ 
.navbar .navbar_toggle_menu > i {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.navbar .navbar_toggle_menu[aria-expanded="true"] > i {
  transform: scale(1.35) rotate(90deg);
}

.navbar .navbar_toggle_menu[aria-expanded="true"] > i.fa-solid::before {
  content: "\f00d";
}

@media (prefers-reduced-motion: reduce) {
  .navbar .navbar_toggle_menu > i {
    transition: none;
  }
}

/** navbar navbar_toggle_menu ------------------------------------------------------------------------ **/ 
/** ================================================================================================== **/  











/** ================================================================================================== **/  
/** background color and image ----------------------------------------------------------------------- **/ 
.bg_overlay_light {background: linear-gradient(90deg,rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0.7));}

.bg_img_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?auto=compress&cs=tinysrgb&w=600&h=750&dpr=2) center center/cover no-repeat;  
}  


.bg_color_ig {
  --bg_opacity: 0.2;
  background-image: linear-gradient(135deg,
   rgba(81, 91, 212, var(--bg_opacity)),
   rgba(129, 52, 175, var(--bg_opacity)),
   rgba(221, 42, 123, var(--bg_opacity)),
   rgba(245, 133, 41, var(--bg_opacity)),
   rgba(254, 218, 119, var(--bg_opacity))
  );
} 

.bg_img_bubbles { 
  background: linear-gradient(to bottom,rgba(255, 255, 255,0.4), rgba(255, 255, 255,0.4)), url(https://styleverse.io/images/bg_4.jpg) center center/cover no-repeat fixed; 
}
.bg_wander {
  background-size: 300% 300%;
   background-attachment: scroll;
    background-repeat: no-repeat;
  animation: animate_bg_wander var(--bg_move_duration, 30s) ease-in-out infinite;
}
@keyframes animate_bg_wander {
  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; }
}
/** background color and image ----------------------------------------------------------------------- **/ 
/** ================================================================================================== **/  





/** ================================================================================================== **/  
/** -------------------------------------------------------------------------------------------------- **/ 
.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;
}
/** -------------------------------------------------------------------------------------------------- **/ 
/** ================================================================================================== **/  



/** ================================================================================================== **/  
/** div_laurel CSS DEFINITIONS ----------------------------------------------------------------------- **/  
.div_laurel {width:225px;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(https://styleverse.io/images/laurel_left.png) right center/15px auto no-repeat;
  display:block;
  float:left;
}  
.div_laurel::after {
  background:transparent url(https://styleverse.io/images/laurel_right.png) left center/15px auto no-repeat;
  float:right;
}  
/** div_laurel CSS DEFINITIONS ----------------------------------------------------------------------- **/  
/** ================================================================================================== **/  




.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: animate_bg_wander 6s linear infinite;


}


.text_shadow {  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));}

 .fa-flip.fa_flip_vertical {--fa-flip-x: 1; --fa-flip-y: 0;--fa-animation-duration: 2s;}  



.card_hover_effect.border-primary {
  border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
}


.card_hover_effect.border-primary:hover {
  transform: translateY(-3px);
  transition: transform 0.2s ease;
  box-shadow: var(--bs-box-shadow) !important;
  border-color: rgba(var(--bs-primary-rgb), 1) !important;
}  


.ui_user_icon {width:60px;height:60px;}
.ui_contact_us_select {width:300px;}
.fa-stack {width:2em;}