/** ************************************************************************************************************* **/
/** supplement existing framework libraries ********************************************************************* **/
* {box-shadow: unset !important;}

.progress {height:25px;}


.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show { 
  border-color: transparent !important;
}
.accordion-button, .accordion-button:not(.collapsed) {
  color:unset;
  background-color: unset;
  box-shadow: unset;
}
.fa-stack {width:2em;} /** take care of fontawesome extra spacing horizontally **/
/** supplement existing framework libraries ********************************************************************* **/
/** ************************************************************************************************************* **/


/** ************************************************************************************************************* **/
/** utilities & reusable css definitions ************************************************************************ **/
.xs {font-size: 0.75em;}
.blur {filter: blur(8px);}
.w_40 {width: 40% !important;}
.w_85 {width: 85% !important;}
.w_90 {width: 90% !important;}
.text_shadow {  text-shadow: 1px 1px 1px #ffffff;}
.shadow_top {
  --bs-box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
  box-shadow: var(--bs-box-shadow) !important;
}

.card_hover_effect img {  transition: transform .5s ease; /* Animation */} 
.card_hover_effect:hover img { transform: scale(1.5);}

.hover_up{top:0px;position:relative;  transition: all 0.3s ease-in-out;}
.hover_up:hover{top:-2px;}
/** utilities & reusable css definitions ************************************************************************ **/
/** ************************************************************************************************************* **/








/** ************************************************************************************************************************* **/
/** navbar RELATED CSS DEFINITIONS ****************************************************************************************** **/
.navbar_bypass {margin-top:57px;}
.navbar-brand {
  --my-height:34px;
  font-size:20px !important;
  display:inline-block;
  line-height:var(--my-height);
  height:var(--my-height);
  padding:0;
  background:transparent url(https://styleverse.io/images/styleverse_logo.png) left center/auto var(--my-height) no-repeat;
  padding-left:calc(var(--my-height) * 1.5); 
}
.bg-dark .navbar-brand, .bg-black .navbar-brand {background-image:url(https://styleverse.io/images/styleverse_logo_white.png);}
.navbar .navbar-toggler {width:35px;height:35px; text-align:center;padding:0;}
.navbar [aria-expanded="true"].navbar-toggler .fa-solid::before {content:"\f00d";} 



.navbar .dropdown-menu li:not(:first-child) {
  border-top: dashed 1px #666666;
}

.navbar .active {background:#f0f0f0;}
.navbar .nav-item:hover {background:#f0f0f0;}


/** Medium devices (desktops, 768px and down) **/
@media (max-width: 768px) { 
  .navbar_bypass {margin-top:44px;}
  .navbar .nav-item { border-top: dashed 1px #666666; }
  .navbar .dropdown-menu { 
    --bs-dropdown-border-radius: none; 
    --bs-dropdown-border-width: none;
    border-top: dashed 1px #666666;
    text-align: center;
  }
}
/** navbar RELATED CSS DEFINITIONS ****************************************************************************************** **/
/** ************************************************************************************************************************* **/

















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













/** ************************************************************************************************************* **/
/** background related css definitions ************************************************************************** **/
.bg_whitewashed {background: linear-gradient(90deg,rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0.7));}
.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:transparent url(../images/bg_4.png) center center/100% auto repeat;}    



.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;  
}  

@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;
  }
}
 

.bg_neurons {  
  /** center, outer**/
  background: radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0.93)),
  url(https://media1.giphy.com/media/cQhmYBg9qPaLYdqajA/giphy.webp?cid=ecf05e470digzci8svjjsn5nu5h0v2jxbmxqlp4i9h2b0o29&ep=v1_gifs_related&rid=giphy.webp&ct=g) center center/cover no-repeat;  
} 

 
.bg_move_diagonal {
  background-size: 210% auto;
  background-position: top left;
  animation: moving_bg_diagonal 300s infinite;
}
@keyframes moving_bg_diagonal {
  0% {background-position: top left;}
  25% {background-position: bottom right;}
  50% {background-position: bottom left;}
  75% {background-position: top right;}
  100% {background-position: top left;}
}
/** background related css definitions ************************************************************************** **/
/** ************************************************************************************************************* **/





/** ************************************************************************************************************* **/
/** site specific css definitions ******************************************************************************* **/
.moving_phone {
  --top-default:5%;
  --top-new:10%;
  top:var(--top-default);
  animation: moving_top 4s infinite;
  left:4%;
}

.moving_laptop {
  --top-default:20%;
  --top-new:15%;
  top:var(--top-default);  
  animation: moving_top 4s infinite;
  right:0%;
}

@keyframes moving_top { 
  0% {top: var(--top-default);}
  50% {top: var(--top-new);}
  100% {top: var(--top-default);} 
}

.img_form {background:#eeeeee;}
/** site specific css definitions ******************************************************************************* **/
/** ************************************************************************************************************* **/









.progress_loading {
  --my_duration: 20s;
  --my_start: 0%;
  --my_end: 100%;
}
.progress_loading .progress-bar {
  animation: 1s linear infinite progress-bar-stripes, var(--my_duration) progress_bar_animate forwards;
} 
@keyframes progress_bar_animate {
  0% { width: var(--my_start); }
  5% { width: calc(var(--my_end) * 0.2); }
  30% { width: calc(var(--my_end) * 0.3); }  
  60% { width: calc(var(--my_end) * 0.8); }  
  99% { width: calc(var(--my_end) * 0.99); } 
  100% { width:var(--my_end); }    
}


.card_height {min-height:400px;max-height:400px;}