/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.we_box {
	border: 3px solid #fff;
	border-top: 10px solid #462576;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	margin: 2% 0;
	padding: 1%;
	opacity: 0.7;
	transition-duration: 0.7s;
}

.we_box:hover {
	border-color: #462576;
	border-top: 10px solid #462576;
	color: #462576;
	cursor: pointer;
	transition-property: none;
}

.pharma-text {
 text-shadow: 
    0 0 8px rgba(0,0,0,0.9),
    0 0 4px rgba(0,0,0,0.7),
    1px 1px 2px rgba(0,0,0,0.8);
}

.logo-left .logo {
    margin-left: 20px;
}

/* Dark Mode Logo Replacement */
.wp-dark-mode-active .custom-logo {
  opacity: 0;
  visibility: hidden;
}

.wp-dark-mode-active .header-logo {
  background-image: url('https://businesstacts.com/wp-content/uploads/2025/05/logo-light-header.webp');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%; /* Adjust based on your logo width */
  height: 45px; /* Match your logo's height */
}

/* Hide WHITE logo (logo-dark-header.webp) in dark mode */
.wp-dark-mode-active .header-logo {
  display: none !important;
}

/* Show DARK MODE logo (logo-light-header.webp) in dark mode */
.wp-dark-mode-active .header-logo-dark {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide DARK MODE logo in light mode */
.header-logo-dark {
  display: none;
  visibility: hidden;
  opacity: 0;
}

/* Prevent layout shift by adding transparent border/padding to default state */
.header:not(.transparent) .header-nav-main.nav > li > a {
    padding-left: 1em;
    border-left: 4px solid transparent;
    transition: border-color 0.3s ease;
}

/* Hover/Active state with gradient text */
.header:not(.transparent) .header-nav-main.nav > li > a:hover,
.header:not(.transparent) .header-nav-main.nav > li.active > a,
.header:not(.transparent) .header-nav-main.nav > li.current > a,
.header:not(.transparent) .header-nav-main.nav > li > a.active,
.header:not(.transparent) .header-nav-main.nav > li > a.current {
    /* Gradient text effect */
    background: linear-gradient(to right, #3498db, #2ecc71);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    
    /* Border effect */
    border-left-color: #3498db;
    
    /* Typography enhancements (without font-size change) */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.5px;
    
    /* Fallback for unsupported browsers */
    color: #3498db;
}

.wp-dark-mode-floating-switch {
     bottom: 70px!important;
}

.responsive-text {
  padding-left: 1em;
  border-left: 4px #3498db solid;
  font-weight: 700;
  /* font-size is now responsive */
  font-size: clamp(16px, 4vw, 18px); 
  background: linear-gradient(to right, #3498db, #2ecc71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

.pharma-industrial-heading {
  /* The responsive font-size */
  font-size: clamp(16px, 2.5vw, 20px); /* Adjust min, preferred, and max values as you see fit */
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}